Populate Input Field using FormControl Angular

Question

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"}]

R.christie · Accepted Answer · 2022-01-20 17:50:23Z

2

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.

edited Jan 20, 2022 at 17:50

answered Jan 20, 2022 at 15:29

R.christie

1062 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ravi Shah Over a year ago

Thats great! But how should I populate the array data inside the input field? Here I am getting only the empty input fields @R.christie

Ravi Shah Over a year ago

I have also updated the array data above. I want to populate the "name" data inside my input fields

R.christie Over a year ago

Hi @RaviShah, Please check out the link in my answer, I have updated the code to meet your requirement. stackblitz.com/edit/angular-ivy-b3gtly?file=src/app/… Please do let me know if you run into any trouble.

Ravi Shah Over a year ago

this works but I am facing the issue getting values from API, I have updated my TS Code and also the dummy array. It takes the default values that is "JustTest" from formGroup and not the PatchValue data supplied. When I checked on console as well I was able to see the correct percentage values

R.christie Over a year ago

Hi @RaviShah, I can see that you have changed the initial dummy array that you provided, to have an object with two properties. I have updated the code in the link below, stackblitz.com/edit/angular-ivy-b3gtly?file=src/app/… The link shows you how to display the name as well as the percentage on your screen. If you want only the percentage value to be displayed I suggest following the code in the example. NOTE that I have updated the Array, as well as the reactive forms form group and added the percentage as a control as well. Hope this helps.

|

Adnan Khalid Shah · Accepted Answer · 2022-01-20 14:44:22Z

0

You can use patchValue directly to an form control in order to do this.

Your current setup seems too complicated unless there are a bunch of other values in the form that's not displayed here.

However, when you get a response from API, you can simply get the reactive form element, and set value.

this.suitablityForm.insurance.insuranceCompany.patchValue('VAL_YOU_WANT');

answered Jan 20, 2022 at 14:44

Adnan Khalid Shah

1067 bronze badges

5 Comments

Ravi Shah Over a year ago

I tried this but it didnt seem to work

Adnan Khalid Shah Over a year ago

stackblitz.com/edit/angular-ivy-kqp9bj?file=src/app/… Please try this, a simplified version of what you're trying to achieve.

Ravi Shah Over a year ago

Well this is not working with the abvove Array i shared

Adnan Khalid Shah Over a year ago

Yeah, that's why I mentioned its a simplified version. Pls do note the way I've patched value. That might help you out

Ravi Shah Over a year ago

Thanks Adnan, I got the usage of Patch but I need to populate values from array which is not happening where as in your case its just a single input field

Collectives™ on Stack Overflow

Populate Input Field using FormControl Angular

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related