在哪里初始化 Reactive 表单中的 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

Shouldn't the FormGroup be initialised on ngOnInit?

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

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 as described in :

中初始化

@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;
  }
}

在哪里初始化 Reactive 表单中的 FormGroup？

Where to initialise a FormGroup in Reactive forms?

angular

typescript

angular-reactive-forms

angular11