具有反应形式的组件的最佳实践是什么？

Question

我正在努力确定定义使用反应式表单的组件的最佳实践是什么。

例如，Reactive Forms docs 举个例子：

1)

export class HeroDetailComponent2 {
  heroForm = new FormGroup ({
    name: new FormControl()
  });
}

和

2)

export class HeroDetailComponent3 {
   heroForm: FormGroup; // <--- heroForm is of type FormGroup 

   constructor(private fb: FormBuilder) { // <--- inject FormBuilder
     this.createForm();
   }

   createForm() {
     this.heroForm = this.fb.group({
       name: '', // <--- the FormControl called "name"
     });
   }
}

1 的问题显然是我们无法访问组件的属性，因此我们可以设置初始值。我们看到的更好的方法是选项2。

但是我也在文档中读到（目前找不到链接），应该避免将逻辑放在组件的构造函数中，相反我们应该支持 ngOnInit()，因为它使测试更容易，性能更高。

我遵循这种将组件初始化逻辑放在 ngOnInit() 中的做法，几乎所有可能的地方。但是，当我有一个引用 formGroup 属性的组件时，我遇到了一个问题。

出现问题的原因是在 ngOnInit 执行之前正在呈现视图，因此我的表单组当时没有实例化。解决它的一种方法是在不同的地方使用 *ngIf - 但这对我来说似乎很乱。

所以我的问题：

在这些情况下忽略不将逻辑放在构造函数中以支持 ngOnInit 的建议是否明智？请记住，在某些情况下，我可能需要进行一些计算才能创建我的 formGroup 实例？

我似乎找不到适合的替代生命周期挂钩？还有其他方法吗？

Answer 1

我会建议你使用 Angular 生命周期钩子并在 ngOnInit() 上创建响应式表单

export class HeroDetailComponent3 implements OnInit {
   heroForm: FormGroup; // <--- heroForm is of type FormGroup 

   constructor(private fb: FormBuilder) { // <--- inject FormBuilder

   }

   ngOnInit(){
      this.createForm();
   }

   createForm() {
     this.heroForm = this.fb.group({
       name: new FormControl('', [Validators.required])
     });
   }
}