在响应式表单中初始化 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.

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

Answer 1

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

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

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

初始化一些依赖于的东西，比如 an @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;
  }
}