具有反應形式的組件的最佳實踐是什么？

Question

我正在努力確定定義使用反應形式的組件的最佳實踐是什么。

例如，“ 響應式表單”文檔給出了一個示例，例如：

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])
     });
   }
}