Populate Input Field using FormControl Angular

Issue

I have an input field where I need to populate array data inside it which is coming from API, I have used FormControl to populate the data but not able to achieve the same.I am getting the response on console but not able to populate it on UI. Below is my code if any anyone could guide me as I have spent 2 entire days and new in Angular. Can anyone please help me here.

HTML Code:

<div formArrayName="ints" *ngFor="let inCompany of insurance.controls; let i = index">
  <div [formGroupName] = "i">
      <ion-card *ngFor="let eq of ef;let i=index;">
                     
              <ion-item>            
                <ion-input formControlName="iCompany"></ion-input>                  
              </ion-item>
</ion-card>
</div>
</div>

TS Code:

     ionViewWillEnter(){
       this.loadData();     
     }

    ngOnInit() {
    this.sForm = this.formBuilder.group({
      ints: this.formBuilder.array([]),
    })
    }
    
      get ints(): FormArray {
       return this.sForm.get('ints') as FormArray;
      }

     get formGroup(): FormGroup {
      return this.formBuilder.group({
      name: ['justTest'],
     });
}
    
   loadData(){
    this.service.getefDetails(data).subscribe((response: any) => {
          this.ef= response.data;
      var formArray = this.sForm.get('ints') as FormArray;
    for (let i = 0; i < this.ef.length; i++) {
      console.log(this.ef.length, this.ef[i].percentage)
      var chec=this.ef[i].percentage
      formArray.push(this.formGroup);
      formArray.controls[i].patchValue(chec);  
    }
    
    )}
}

Array Type: [{name:"test", percentage: "29"},{name:"abc", percentage: "45"}, {name:"def", percentage: "63"}]

Solution

First of all, I suggest you re-think your approach as mentioned in the earlier comment it seems you have made it unnecessarily complicated. Also, I would think of renaming your variables it is quite confusing and will be a pain to maintain later on.

To answer your question and get the "ion-input" printed on the screen do the following changes to the HTML.

You can not assign <div [formGroupName] = "i"> i to the formGroup since it is not of type formGroup as it is assigned to the index.

The solution is to assign <div [formGroupName] = "insuranceCompany[0]"> So that a form group will be assigned. Again I suggest that you rename the variable "insuranceCompany" for clarity purposes as there is a control named "insuranceCompany" as well.

Here is a working example of your code minus the ionic tags. https://stackblitz.com/edit/angular-ivy-b3gtly?file=src/app/app.component.ts

Hope I made myself clear, and hope it helps.

Answered By - R.christie