Property 'controls' does not exist on type 'AbstractControl' Angular 4

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);
}

@GünterZöchbauer do we need to use this in HTML ngFor or in the Typescript ? — Munna Babu, Oct 25 '17 at 08:32
@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 — Munna Babu, Oct 25 '17 at 08:43
Then you probably changed it on the wrong place. It's quite unlikely that `get()` throws an error that `controls()` doesn't exist. — Günter Zöchbauer, Oct 25 '17 at 08:44
create getter like `get addressesControls() { return (this.myForm.get('addresses')).controls; }` or just use the following `myForm.get('addresses')['controls']` — yurzui, Oct 25 '17 at 08:49
@yurzui Thanks just update myForm.get('addresses')['controls'] in HTML , its working fine now — Munna Babu, Oct 25 '17 at 08:56
how this thing will itterate may I know Munna rentalPricingForm.controls.pricingBundle.controls[i].controls.packageName.errors — HD.., Nov 22 '17 at 12:28

Munna Babu · Accepted Answer · 2017-10-25T09:59:13.543

270

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

edited Oct 25 '17 at 09:59

answered Oct 25 '17 at 09:03

Munna Babu

5,496
6
29
44

4

My case: form.get('user')['controls'].profile. its ok tnks – Rafael L R Jul 19 '19 at 12:33
5

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``` – Kelvin Cayman Apr 04 '20 at 05:41
Kinda woodoo magic, it must be working without array notation.... – Majesty Jan 19 '21 at 10:05
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') – Andrew Jan 29 '23 at 16:53

score 113 · Answer 2 · edited Nov 21 '19 at 15:08

113

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).

edited Nov 21 '19 at 15:08

ConnorsFan

70,558
13
122
146

answered Dec 18 '18 at 08:06

sunny kashyap

2,193
2
19
29

2

Maybe on later angular versions you have to use `return (this.recipeForm.get('controlName') as FormArray).controls;` – Victor Reyes Jun 29 '19 at 16:38
1

Works Well with Angular 14 – Krishneel Singh Sep 13 '22 at 04:55
This helped me than the accepted answer. Thank you :) (Angular 11) – Scorpy47 Apr 24 '23 at 02:40

score 12 · Answer 3 · answered Oct 03 '18 at 14:30

12

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

answered Oct 03 '18 at 14:30

Advait Baxi

1,530
14
15

score 10 · Answer 4 · answered May 09 '19 at 20:38

10

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

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

answered May 09 '19 at 20:38

Motasem Halawani

156
4
12

score 2 · Answer 5 · answered Mar 09 '19 at 01:24

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;
}

score 0 · Answer 6 · answered Oct 25 '17 at 08:24

0

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

answered Oct 25 '17 at 08:24

Mohamed Ali RACHID

3,245
11
22

Thanks. But It doesn't fix issue. – Munna Babu Oct 25 '17 at 08:30
Yes @mohammed, pls chk the updated code in question – Munna Babu Oct 25 '17 at 08:44
2

can you please try this `let address of myForm.controls.addresses.controls` instead of `let address of myForm.get('addresses').controls` – Mohamed Ali RACHID Oct 25 '17 at 08:49

score 0 · Answer 7 · answered Oct 29 '19 at 19:43

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
}

Property 'controls' does not exist on type 'AbstractControl' Angular 4

7 Answers7

Linked

Related