Cannot find control with unspecified name attribute on formArrays

Question

I am trying to iterate over a formArray in my component but I get the following error

Error: Cannot find control with unspecified name attribute

Here is what the logic looks like on my class file

export class AreasFormComponent implements OnInit {
    public initialState: any;
    public areasForm: FormGroup;

    constructor(private fb: FormBuilder) { }

    private area(): any {
      return this.fb.group({
          name: ['', [Validators.required]],
          latLong: ['', [Validators.required]],
          details: ['', [Validators.required]]
      });
    }

    public ngOnInit(): void {
        this.areasForm = this.fb.group({
            name: ['', [Validators.required]],
            areas: this.fb.array([this.area()])
        });
    }
}

and my template file

<form class="areas-form" [formGroup]="areasForm" (ngSubmit)="onSubmit(areasForm.values)">
    <md-input-container class="full-width">
        <input mdInput placeholder="Location Name" type="text" formControlName="name" required>
        <md-error *ngIf="areasForm.get('name').hasError('required')">Please enter the locationName</md-error>
    </md-input-container>
    <md-grid-list cols="1" [formArrayName]="areas">
        <md-grid-tile formGroupName="i"  colspan="1" rowHeight="62px" *ngFor="let area of areasForm.controls.areas.controls; let i = index ">
            <md-grid-list cols="3" rowHeight="60px">
                <md-grid-tile colspan="1">
                    <md-input-container class="full-width">
                        <input mdInput placeholder="Area Name" type="text" formControlName="name" required>
                        <md-error *ngIf="areasForm.get('areas').controls[i].name.hasError('required')">Please enter the area name</md-error>
                    </md-input-container>
                </md-grid-tile>
                <md-grid-tile colspan="1">
                    <md-input-container class="full-width">
                        <input mdInput placeholder="details" type="text" formControlName="details" required>
                        <md-error *ngIf="areasForm.get('areas').controls[i].name.hasError('required')">Please enter the locationName</md-error>
                    </md-input-container>
                </md-grid-tile>
                <md-grid-tile colspan="1">
                    <button md-fab (click)="remove(i)"><md-icon>subtract</md-icon>Remove Area</button>
                </md-grid-tile>
            </md-grid-list>
        </md-grid-tile>
    </md-grid-list>
    <button type="submit" [disabled]="areasForm.invalid" md-raised-button color="primary">Submit</button>
</form>

AT82 · Accepted Answer · 2019-09-04T10:08:52.827

178

Remove the brackets from

[formArrayName]="areas"

and use only

formArrayName="areas"

This, because with [ ] you are trying to bind a variable, which this is not. Also notice your submit, it should be:

(ngSubmit)="onSubmit(areasForm.value)"

instead of areasForm.values.

edited Sep 04 '19 at 10:08

answered Apr 16 '17 at 16:12

AT82

71,416
24
140
167

Is your plunkr broken? – Jess Sep 21 '18 at 18:27
3

and yet [FormGroup]="areasForm" is correct? Angular is really kicking me in the pants.... – greg Sep 04 '19 at 01:20
The curly brackets were the problem in my case with the formGroupName – Luis Contreras Oct 17 '19 at 20:57
3

@greg late to comment... `[formGroup]="areasForm"` is correct because `areasForm` is a variable in your component TS, whereas `areas` is not. It is property of the `areasForm` :) – AT82 Oct 31 '19 at 11:44
I had this error pointing to row "106" in my template. It turned out that the formControl *before that line* was misspelled! So this error is saying that error is at row X, when it is actually before that. Oh btw, upgrade to 14+ if you can. It has typed forms! – O-9 Oct 04 '22 at 12:30

score 26 · Answer 2 · edited Jan 25 '20 at 19:06

26

In my case I solved the issue by putting the name of the formControl in double and sinlge quotes so that it is interpreted as a string:

[formControlName]="'familyName'"

similar to below:

formControlName="familyName"

edited Jan 25 '20 at 19:06

Community

1
1

answered Jun 06 '17 at 14:40

Tobias Gassmann

11,399
15
58
92

Thank you for the explanation. I kept seeing the formControlName wrapped in single quotes but the difference between passing it as a string vs the formControl object didn't click until seeing this. – Mason240 May 14 '21 at 15:52

score 11 · Answer 3 · answered May 20 '17 at 08:08

11

The problem for me was that I had

[formControlName]=""

Instead of

formControlName=""

answered May 20 '17 at 08:08

smac89

39,374
15
132
179

2

I needed to change from [formControl] to formControlName – danilo Jun 13 '19 at 14:06

developer033 · Answer 4 · 2020-08-13T18:47:35.480

7

Instead of

formGroupName="i"

You must use:

[formGroupName]="i"

Tips:

Since you're looping over the controls, you've already the variable area, so you can replace this:

*ngIf="areasForm.get('areas').controls[i].name.hasError('required')"

by:

*ngIf="area.hasError('required', 'name')"

edited Aug 13 '20 at 18:47

answered Apr 16 '17 at 13:57

developer033

24,267
8
82
108

Thanks, that seemed to be part of the problem but the answer above solved my issue. – Bazinga777 Apr 16 '17 at 17:53

score 6 · Answer 5 · answered Oct 15 '18 at 14:09

6

For me, I was trying to add [formGroupName]="i" and/or formControlName and forgetting to specify the parent formArrayName. Pay attention to your form group tree.

answered Oct 15 '18 at 14:09

giovannipds

2,860
2
31
39

1

I was using both as well. Remember to put the `formArrayName` on a DOM-element higher up in the hierarchy than `[formGroupName]="i"` (e.g. on the loop element: `
`) – John Jul 18 '19 at 11:46
2

**Pay attention to form group tree** helped me. – Krishna Sep 17 '20 at 15:54

score 4 · Answer 6 · answered Jun 14 '18 at 05:32

4

This was happening for me because I had fromArrayName instead of formArrayName somewhere

answered Jun 14 '18 at 05:32

Jacob Stamm

1,660
1
29
53

score 3 · Answer 7 · answered Mar 05 '20 at 17:55

So, I had this code:

<div class="dropdown-select-wrapper" *ngIf="contentData">
    <button mat-stroked-button [disableRipple]="true" class="mat-button" (click)="openSelect()" [ngClass]="{'only-icon': !contentData?.buttonText?.length}">
      <i *ngIf="contentData.iconClassInfo" class="dropdown-icon {{contentData.iconClassInfo.name}}"></i>
      <span class="button-text" *ngIf="contentData.buttonText">{{contentData.buttonText}}</span>
    </button>
    <mat-select class="small-dropdown-select" [formControl]="theFormControl" #buttonSelect (selectionChange)="onSelect(buttonSelect.selected)" (click)="$event.stopPropagation();">
      <mat-option *ngFor="let option of options" [ngClass]="{'selected-option': buttonSelect.selected?.value === option[contentData.optionsStructure.valName]}" [disabled]="buttonSelect.selected?.value === option[contentData.optionsStructure.valName] && contentData.optionSelectedWillDisable" [value]="option[contentData.optionsStructure.valName]">
        {{option[contentData.optionsStructure.keyName]}}
      </mat-option>
    </mat-select>
  </div>

Here I was using standalone formControl, and I was getting the error we are talking about, which made no sense for me, since I wasn't working with formgroups or formarrays... it only disappeared when I added the *ngIf to the select it self, so is not being used before it actually exists. That's what solved the issue in my case.

<mat-select class="small-dropdown-select" [formControl]="theFormControl" #buttonSelect (selectionChange)="onSelect(buttonSelect.selected)" (click)="$event.stopPropagation();" *ngIf="theFormControl">
          <mat-option *ngFor="let option of options" [ngClass]="{'selected-option': buttonSelect.selected?.value === option[contentData.optionsStructure.valName]}" [disabled]="buttonSelect.selected?.value === option[contentData.optionsStructure.valName] && contentData.optionSelectedWillDisable" [value]="option[contentData.optionsStructure.valName]">
            {{option[contentData.optionsStructure.keyName]}}
          </mat-option>
        </mat-select>

I had the problem when a host modal component was dismissed. I had to use ngIf to check whether the control was still available when closing my dialog. — samneric, Feb 14 '22 at 22:42

score 1 · Answer 8 · answered Sep 09 '21 at 19:13

For me, the issue was I was missing the field name in the form builder:

  return this.fb.group({
      name: ['', [Validators.required]],
      latLong: ['', [Validators.required]],
      details: ['', [Validators.required]],
      // missing field name!
  });

score 0 · Answer 9 · answered Dec 02 '19 at 20:43

0

This happened to me because I left a formControlName empty (formControlName=""). Since I didn't need that extra form control, I deleted it and the error was resolved.

answered Dec 02 '19 at 20:43

Stephanie McNaught

141
1
3
7

score 0 · Answer 10 · answered Feb 06 '21 at 12:05

0

Only WinMerge made me find it (by comparison with a version that works). I had a case problem on formGroupName. Brackets around this word can lead to the same problem.

answered Feb 06 '21 at 12:05

user3500176

29
2

score 0 · Answer 11 · answered Apr 16 '21 at 21:27

I had accidentally entered the control name when creating the formGroup:

getFormGroup(dataItem: any): FormGroup {
    return new FormGroup({
        'Id': new FormControl(dataItem != null ? dataItem.Id : ''),
        'PsDepartmentId': new FormControl(dataItem != null ? dataItem.DepartmentId : '', Validators.required), //Accidentally used 'DepartmentId' on this line
        'IsActive': new FormControl(dataItem != null ? dataItem.IsActive : true)
    });
}

Then it failed in the html when I did

          <kendo-dropdownlist id="ps-dpts-dropdown" [data]="psDepartments" textField="ConCatedName" valueField="Id"
          [formControl]="formGroup.get('DepartmentId')" [valuePrimitive]="true">                  
          </kendo-dropdownlist>

score 0 · Answer 12 · answered Oct 13 '22 at 18:34

0

Angular 13! formControlName should not empty.

formControlName=""

answered Oct 13 '22 at 18:34

Mateen

503
2
10

score 0 · Answer 13 · answered Jan 04 '23 at 20:12

0

It was because formControlName='' was empty.

answered Jan 04 '23 at 20:12

Tatyana Molchanova

1,305
5
12
23

score 0 · Answer 14 · answered Aug 28 '23 at 07:46

0

In my case, I forgot to initialize the form in ngOnInit() when using [formControl]="customForm".

answered Aug 28 '23 at 07:46

Anh-Thi DINH

1,845
1
23
17

Cannot find control with unspecified name attribute on formArrays

14 Answers14

Linked