Property 'controls' does not exist on type 'AbstractControl'. Angular 6

Question

when we use setvalue in for loop.

Every thing is fine but it gives error:-

Property 'controls' does not exist on type 'AbstractControl'.

Angular 6 How we solve this..

for (let i = 0; i < this.experience.length; i++) 
  { 
     if ( i !== 0 ){ 
       const control = <FormArray>this.expGroup.controls['expArray'];
       control.push(this.getExp()); 
     }
  this.expArray.at(i).controls['company_Name'].setValue(this.experience[i].company_Name);
  this.expArray.at(i).controls['position'].setValue(this.experience[i].position); 

  this.expArray.at(i).controls['employee_id'].setValue(this.experience[i].employee_id); 

  this.expArray.at(i).controls['time_prefered'].setValue(this.experience[i].time_prefered);   this.expArray.at(i).controls['work_exp_year'].setValue(this.experience[i].work_exp_year);   this.expArray.at(i).controls['date_of_joining'].setValue(this.experience[i].date_of_joining);   
  this.expArray.at(i).controls['id'].setValue(this.experience[i].id);    
}

it's better to use a getter in this case like `this.expGroup.get(`expArray.${index}.company_Name`).setValue(this.experience[i].company_Name)` . — Niladri, Oct 02 '18 at 08:09
Thanku so much sir its work properly after doing this this.expArray.at(i).get('company_Name').setValue(this.experience[i].company_Name); — Aakankshi Gupta, Oct 02 '18 at 10:02
Can use a [custom interface](https://stackoverflow.com/a/58614356/1669165) — Uriy MerkUriy, Oct 29 '19 at 19:59

score 1 · Accepted Answer · answered Oct 02 '18 at 12:58

Instead of directly accessing the controls property of each FormArray element , it recommended to use a getter to access the required control from the FormArray . While iterating the FormArray by index it exposes each array element as type of AbstractControl which directly does not have access to the controls property. Hence you can use the below code -

this.expArray.at(i).get('company_Name').setValue(this.experience[i].company_Name);

to set value to the each control inside the FormArray.

Here is the complete code -

    for (let i = 0; i < this.experience.length; i++) 
      { 
         if ( i !== 0 ){ 
           const control = <FormArray>this.expGroup.controls['expArray'];
           control.push(this.getExp()); 
         }
     this.expArray.at(i).get('company_Name').setValue(this.experience[i].company_Name); 
     this.expArray.at(i).get('position').setValue(this.experience[i].position); 

     this.expArray.at(i).get('employee_id').setValue(this.experience[i].employee_id); 

     this.expArray.at(i).get('time_prefered').setValue(this.experience[i].time_prefered);
     this.expArray.at(i).get('work_exp_year').setValue(this.experience[i].work_exp_year);
     this.expArray.at(i).get('date_of_joining').setValue(this.experience[i].date_of_joining);   
     this.expArray.at(i).get('id').setValue(this.experience[i].id);    

   }

There is some problem to setValue to checkbox. i will provide u stackblitz link to review. — Aakankshi Gupta, Feb 01 '19 at 10:33

Property 'controls' does not exist on type 'AbstractControl'. Angular 6

1 Answers1