Must supply a value for form control with name: 'invoice_name'?

Issue

I'm facing to a problem concerning my form. When I click on update button it should retrieve informations through a form, but I have this following issue :

Must supply a value for form control with name: 'invoice_name' ?

I checked some help concerning SetValue or PathValue... But unfortunately nothing is working well...

invoice-details.ts

 ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.getInvoice(this.id);
    this.invoiceForm = this.formBuilder.group({
      'invoice_name':     [null,Validators.required],
      'invoice_amount':   [null,Validators.required],
      'invoice_category_id': [null,Validators.required],
      'invoice_price':    [null,Validators.required],
    });
}

      getInvoice(id:number){

        this.invoiceService.getInvoiceItem(id).subscribe((data:any)=> {
          console.log(this.id)
          this.id = data.id;
          this.invoiceForm.setValue({
            invoice_name : data.invoice_name,
            invoice_amount : data.invoice_amount,
            invoice_category_id: data.invoice_category_id,
            invoice_price: data.invoice_price,

          });
        });
      }

invoice-details.html

<form [formGroup]="invoiceForm" (ngSubmit)="onFormSubmit()">
    <ion-list>
      <ion-item>
        <ion-input color="light" formControlName="invoice_name" inputmode="text" placeholder="name"  name="invoice_name"></ion-input>
        <ion-icon name="mail" color="orange" size="small" slot="start"></ion-icon>
      </ion-item>
      <ion-item>
        <ion-input color="light" formControlName="invoice_amount" type="text" placeholder="amount"  name="invoice_amount"></ion-input>
        <ion-icon name="lock" color="orange" size="small" slot="start"></ion-icon>
      </ion-item>
      <ion-item> <ion-input color="light" formControlName="invoice_category_id" inputmode="text" placeholder="category"name="invoice_category_id"></ion-input>
    <ion-icon name="contact" color="orange" size="small" slot="start"></ion-icon>
  </ion-item>
  <ion-item>
    <ion-input color="light" formControlName="invoice_price" inputmode="text" placeholder="price" name="invoice_price"></ion-input>
    <ion-icon name="contact" color="orange" size="small" slot="start"></ion-icon>
  </ion-item>
</ion-list>
<br>
<ion-row>
  <ion-col width-50 style="text-align: center">
    <ion-button shape="round" color="orange"  type="submit" [disabled]="!invoiceForm.valid">SAVE</ion-button>
  </ion-col>
</ion-row>

I'm a beginner in ionic/angular

Solution

I found the solution:

 getInvoice(){
      this.id = this.route.snapshot.params['id']
      this.invoiceService.getInvoiceItemsByUuid(this.id).subscribe(result => {
      this.data = result
      this.form.patchValue({
        name : this.data[0]['name'],
        amount : this.data[0]['amount'],
        category_id: this.data[0]['category_id'],
        price: this.data[0]['price'],
      });
    });
    }

Answered By - Anthony PALERMO