在响应式表单中初始化FormGroup的位置？
在严格模式下使用 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 吗？
回答
不应该在 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;
}
}