Angular FormGroup初始化问题

尝试使用登录表单（定义如下）运行angular应用程序时，会抛出一个错误：

src/app/pages/auth/login/login.component.ts:12:3-错误TS2564: 属性“loginForm”没有初始值设定项，并且没有明确指定 在构造函数中

---

有人知道初始化FormGroup的正确方法吗？

根据错误消息在构造函数中执行此操作：

constructor(private authService: AuthService) {
  this.loginForm = new FormGroup({
    email: new FormControl('', {
      validators: [Validators.required, Validators.email]
    }),
    password: new FormControl('', { validators: [Validators.required] })
  });
}

或者，您可以在类定义中对其进行初始化：

loginForm = new FormGroup({
  email: new FormControl('', {
    validators: [Validators.required, Validators.email]
  }),
  password: new FormControl('', { validators: [Validators.required] })
});

这与

FormGroup

没有特别关系，它是一种排版脚本设置，不允许在类定义或构造函数中定义不可为null的属性

如果不喜欢此设置，可以修改

tsconfig.json

以将其包含在

编译器选项中：

"strictPropertyInitialization": false

这将允许您不初始化构造函数中的属性，但也不会在忘记初始化时发出警告。唯一需要记住的是，
@Input（）
绑定在构造函数中还没有准备好，所以在构建表单时不要尝试使用它们。创建表单后，使用它们修改或设置表单的值。
在构造函数中执行此操作，请按照错误消息执行：

constructor(private authService: AuthService) {
  this.loginForm = new FormGroup({
    email: new FormControl('', {
      validators: [Validators.required, Validators.email]
    }),
    password: new FormControl('', { validators: [Validators.required] })
  });
}

或者，您可以在类定义中对其进行初始化：

loginForm = new FormGroup({
  email: new FormControl('', {
    validators: [Validators.required, Validators.email]
  }),
  password: new FormControl('', { validators: [Validators.required] })
});

这与
FormGroup
没有特别关系，它是一种排版脚本设置，不允许在类定义或构造函数中定义不可为null的属性

如果不喜欢此设置，可以修改
tsconfig.json
以将其包含在
编译器选项中：

"strictPropertyInitialization": false

这将允许您不初始化构造函数中的属性，但也不会在忘记初始化时发出警告。唯一需要记住的是，
@Input（）
绑定在构造函数中还没有准备好，所以在构建表单时不要尝试使用它们。使用它们在表单生成后修改或设置表单的值。
在下面的示例类中初始化表单将解决此问题。然后我们可以使用
这个
操作符

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  form = new FormGroup({
    name: new FormControl()
  });

  onSubmit(): void {
    console.log('Name:' + this.form.get('name').value);
  }
}

在下面的示例类中初始化表单将解决此问题。然后我们可以使用
这个
操作符

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  form = new FormGroup({
    name: new FormControl()
  });

  onSubmit(): void {
    console.log('Name:' + this.form.get('name').value);
  }
}

这个问题对我来说也是一样，我将formGroup初始化移动到构造函数并开始工作。
form:formGroup=new formGroup（{….}）
这将解决这个问题。然后与
this.form一起使用
这是否回答了您的问题？这个问题对我来说也是一样，我将formGroup初始化移动到构造函数并开始工作。
form:formGroup=new formGroup（{….}）
这将解决这个问题。然后与
this.form一起使用
这是否回答了您的问题？