Property 'controls' does not exist on type 'AbstractControl' Angular 4 [duplicate]

Question

I am trying a nested reactive form in Angular 4. It is working fine but when I try to build AOT it's throwing the error

'controls' does not exist on type 'AbstractControl'

I googled and tried few things but no luck. Could anyone tell me how to fix this issue?

<div [formGroup]="myForm">
  <div formArrayName="addresses">
      <div *ngFor="let address of myForm.get('addresses').controls; let i=index" 
                  class="panel panel-default">
          <span *ngIf="myForm.get('addresses').length > 1"
                  (click)="removeAddress(i)">Remove</span>
          <div [formGroupName]="i">
              <mat-form-field>
                  <input matInput formControlName="city" placeholder="city" value="">
              </mat-form-field>
          </div>

      </div>
  </div>
  <a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>

typescript code below

constructor(private _fb: FormBuilder) {     
}

ngOnInit() {
    this.myForm = this._fb.group({
        addresses: this._fb.array([
            this.initAddress(),
        ])
    });
}
initAddress() {
    return this._fb.group({
        city: ['']
    });
}
addAddress() {
    const control = <FormArray>this.myForm.get('addresses');
    control.push(this.initAddress());
}
removeAddress(i: number) {
    const control = <FormArray>this.myForm.get('addresses');
    control.removeAt(i);
}

Algoid

I think the preferred way is myForm.get('addresses') – Tar

@GünterZöchbauer do we need to use this in HTML ngFor or in the Typescript ? – Algoid

Should work in both if myForm is an AbstractControl – Tar

@GünterZöchbauer updated code in the question as per ur suggestion, its working fine but AOT throw same error :( any idea ? pls chk code – Algoid

Then you probably changed it on the wrong place. It's quite unlikely that get() throws an error that controls() doesn't exist. – Tar

create getter like get addressesControls() { return (<FormArray>this.myForm.get('addresses')).controls; } or just use the following myForm.get('addresses')['controls'] – Carnahan

@Carnahan Thanks just update myForm.get('addresses')['controls'] in HTML , its working fine now – Algoid

how this thing will itterate may I know Munna rentalPricingForm.controls.pricingBundle.controls[i].controls.packageName.errors – Cindy

Answer 1

Based on @Günter Zöchbauer comments , first i changed

myForm.controls['addresses'] to myForm.get('addresses') in both html and typescript

and then based on @yuruzi comment

changed myForm.get('addresses').controls to myForm.get('addresses')['controls']

Its working fine now. Thanks @gunter & yuruzi

Algoid

My case: form.get('user')['controls'].profile. its ok tnks – Elizabethelizabethan

This wrked for me seamlessly. Thanks Man! In the tempate myForm.get('addresses')['controls'] In the ts const control = this.myForm.controls.addresses as FormArray – Tincher

Kinda woodoo magic, it must be working without array notation.... – Disability

I think @sunnykashyap's answer is preferred by keeping type safety in place. This way sets the type to 'any' which can still generate type errors (Element implicitly has an 'any' type because expression of type '"controls"' can't be used to index type 'AbstractControl<any, any>') – Beefwitted

Answer 2

You can fix it easily though. Outsource the "get the controls" logic into a method of your component code (the .ts file):

getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}

In the template, you can then use:

*ngFor="let ingredientCtrl of getControls(); let i = index"

This adjustment is required due to the way TS works and Angular parses your templates (it doesn't understand TS there).

Hurff

Maybe on later angular versions you have to use return (this.recipeForm.get('controlName') as FormArray).controls; – Cristionna

Works Well with Angular 14 – Acanthaceous

Answer 3

Change myForm.get('addresses').controls to myForm.get('addresses').value will also fix the issue.

Labroid

Answer 4

As an update to @sunny kashyap solution, I would write it this way:

getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}

Sociology

Answer 5

for validation errors use...

<span *ngIf="f.YOUR_FORM_KEY.controls.YOUR_FORM_KEY.errors?.YOUR_FORM_VALIDATION">YOUR_FORM_KEY is YOUR_FORM_VALIDATION</span>

eg.

<span *ngIf="f.name.controls.name.errors?.required">Name is required</span>

ts file

get f(): any {
    return this.userForm.controls;
}

Pyre

Answer 6

to get the length of a FormArray , use simply length :

<span *ngIf="myForm.controls['addresses'].length > 1" (click)="removeAddress(i)">Remove</span>

Hope it helps

Peppy

Thanks. But It doesn't fix issue. – Algoid

Yes @mohammed, pls chk the updated code in question – Algoid

can you please try this let address of myForm.controls.addresses.controls instead of let address of myForm.get('addresses').controls – Peppy

Answer 7

Can use a custom interface

// Define AbstractFormGroup
export interface AbstractFormGroup extends FormGroup {
  controls: {
    [key: string]: AbstractFormGroup & AbstractFormGroup[] & AbstractControl & FormGroup & FormArray,
  }
}

// Usage example
class ... {
  myForm: AbstractFormGroup
  ...
  this.myForm = this.fb.group({...}) as AbstractFormGroup
}

Countervail