在响应式表单中在哪里初始化 FormGroup？

Question

在严格模式下使用 Angular 11 和 Typescript 4 我有：

export class ContactComponent implements OnInit { 

  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {

    this.form = this.formBuilder.group({ 
      email: ['', [Validators.required, Validators.email]],
      name: ['', [Validators.required, Validators.maxLength(40)]],
    });

  }

我收到构建错误：

 Property 'form' has no initialiser and is not definitely assigned in the constructor.

FormGroup 不应该在 ngOnInit 上初始化吗？

Answer 1

FormGroup 不应该在 ngOnInit 上初始化吗？

不一定是这样；我发现直接在类上初始化大多数东西是最简单的，如下所示：

export class ContactComponent implements OnInit { 

  form = this.formBuilder.group({ 
    email: ['', [Validators.required, Validators.email]],
    name:  ['', [Validators.required, Validators.maxLength(40)]],
  });

  constructor(private formBuilder: FormBuilder) { }

}

这与

strictPropertyInitialization

配合得很好。

例外是在初始化需要来自 DOM 的数据的东西时（

@Input

、

@ViewChild

等），因为这些东西是在各种 Lifecycle Hooks 中初始化的，如这个答案中所述：

• @Input()

  →

  ngOnInit

• @ViewChild()

  →

  ngAfterViewInit

• @ContentChildren()

  →

  ngAfterContentInit

初始化依赖于

@Input()

的东西，将在相应的生命周期钩子

ngOnInit

中完成，但是，这并不能满足严格的规则，因此需要

Definite Assignment Assertion Operator

!

。

export class ContactComponent implements OnInit { 
  @Input() input!: number;

  inputDoubled!: number;
  
  form = this.formBuilder.group({ 
    email: ['', [Validators.required, Validators.email]],
    name:  ['', [Validators.required, Validators.maxLength(40)]],
  });

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.inputDoubled = this.input * 2;
  }
}

Answer 2

在以下位置声明

FormGroup

是完全可以的：

• 构造函数；
• 生命周期挂钩；
• 作为类属性。

选项一：

  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      // Define your form controls here
    });
  }

选项二：

  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.myForm = this.formBuilder.group({
      // Define your form controls here
    });
  }

选项三：

  myForm: FormGroup = new FormGroup({
    // Define your form controls here
  });

  constructor() {}