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

我建议您使用角度生命周期挂钩，并在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])
     });
   }
}

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

1 个答案: