formBuilder.group() 无法从 angular8 中的@input 获取数据

Question

I'm trying to implement a edit form that displays value data that it gets in from the db but the problem is that when I try to use formGroup with formBuilder I cant put my @INPUT data in the constructor I get undefined data.

How can I use the @input data in the formbuilder constructor?

 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

You have to create the form controls. I would also do a couple things different to be easier to read and maintain.

Is best practice to initiate the form on OnInit instead of the constructor. When a class is instantiated it will first run the constructor and then 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)
     });
  }

That should do it!

Answer 2

Iconio is correct - you should create a function that sets up your form once the component has loaded.

There is no need to declare a new FormControl for every field on your form though.

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