formBuilder.group() 無法從 angular8 中的@input 獲取數據

Question

我正在嘗試實現一個編輯表單，該表單顯示它從數據庫中獲取的值數據，但問題是當我嘗試將formGroup與formBuilder一起使用formGroup ，我無法將 @INPUT 數據放入構造函數中，但我得到了未定義的數據。

如何在 formbuilder 構造函數中使用 @input 數據？

 export class EditModalComponent implements OnInit {
  checkoutForm;
  @Input() product //this is the data from the father component
  closeResult = '';

  ngOnInit() {

  }

  constructor(private modalService: NgbModal,
    private formBuilder: FormBuilder) {
    this.checkoutForm = this.formBuilder.group({
      imageURL: this.product.imageURL,// i get undefined
      name: this.product.name,// i get undefined
      category: this.product.category,// i get undefined
      price: this.product.price,// i get undefined
    });
  }

Answer 1

您必須創建表單控件。 我也會做一些不同的事情來更容易閱讀和維護。

最佳做法是在OnInit而不是構造函數上啟動表單。 當一個類被實例化時，它將首先運行構造函數，然后是 OnInit。

  ngOnInit() {
     this.initForm();
  }

  initForm() {
     this.checkoutForm = this.formBuilder.group({
         imageURL: new FormControl(this.product.imageURL),
         name: new FormControl(this.product.name),
         category: new FormControl(this.product.category),
         price: new FormControl(this.product.price)
     });
  }

應該這樣做！

Answer 2

Iconio 是正確的 - 您應該創建一個函數來在組件加載后設置表單。

不過，無需為表單上的每個字段聲明一個新的 FormControl。

ngOnInit() {
    this.populateForm();
}

populateForm() {    
  this.checkoutForm = this.formBuilder.group({
     imageURL: [this.product.imageURL],
     name: [this.product.name],
     category: [this.product.category],
     price: [this.product.price]
 });
}