Angular 2 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    lt form class  areas-form   formGroup   areasForm   ngSubmit   onSubmit areasForm values   gt       lt md-input-container class  full-width  gt           lt input mdInput placeholder  Location Name  type  text  formControlName  name  required gt           lt md-error  ngIf  areasForm get  name   hasError  required    gt Please enter the locationName lt  md-error gt       lt  md-input-container gt       lt md-grid-list cols  1   formArrayName   areas  gt           lt md-grid-tile formGroupName  i   colspan  1  rowHeight  62px   ngFor  let area of areasForm controls areas controls  let i   index   gt               lt md-grid-list cols  3  rowHeight  60px  gt                   lt md-grid-tile colspan  1  gt                       lt md-input-container class  full-width  gt                           lt input mdInput placeholder  Area Name  type  text  formControlName  name  required gt                           lt md-error  ngIf  areasForm get  areas   controls i  name hasError  required    gt Please enter the area name lt  md-error gt                       lt  md-input-container gt                   lt  md-grid-tile gt                   lt md-grid-tile colspan  1  gt                       lt md-input-container class  full-width  gt                           lt input mdInput placeholder  details  type  text  formControlName  details  required gt                           lt md-error  ngIf  areasForm get  areas   controls i  name hasError  required    gt Please enter the locationName lt  md-error gt                       lt  md-input-container gt                   lt  md-grid-tile gt                   lt md-grid-tile colspan  1  gt                       lt button md-fab  click   remove i   gt  lt md-icon gt subtract lt  md-icon gt Remove Area lt  button gt                   lt  md-grid-tile gt               lt  md-grid-list gt           lt  md-grid-tile gt       lt  md-grid-list gt       lt button type  submit   disabled   areasForm invalid  md-raised-button color  primary  gt Submit lt  button gt   lt  form gt

User · Answer

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"

User · Answer

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

User · Answer

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

User · Answer

Instead of formGroupName  quot i quot   You must use   formGroupName   quot i quot   Tips  Since you re looping over the controls  you ve already the variable area  so you can replace this   ngIf  quot areasForm get  areas   controls i  name hasError  required   quot   by   ngIf  quot area hasError  required    name   quot

User · Answer

So  I had this code    lt div class  dropdown-select-wrapper   ngIf  contentData  gt       lt button mat-stroked-button  disableRipple   true  class  mat-button   click   openSelect     ngClass     only-icon    contentData  buttonText  length   gt         lt i  ngIf  contentData iconClassInfo  class  dropdown-icon   contentData iconClassInfo name    gt  lt  i gt         lt span class  button-text   ngIf  contentData buttonText  gt   contentData buttonText   lt  span gt       lt  button gt       lt mat-select class  small-dropdown-select   formControl   theFormControl   buttonSelect  selectionChange   onSelect buttonSelect selected    click    event stopPropagation     gt         lt 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   amp  amp  contentData optionSelectedWillDisable   value   option contentData optionsStructure valName   gt            option contentData optionsStructure keyName           lt  mat-option gt       lt  mat-select gt     lt  div gt    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    lt mat-select class  small-dropdown-select   formControl   theFormControl   buttonSelect  selectionChange   onSelect buttonSelect selected    click    event stopPropagation      ngIf  theFormControl  gt             lt 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   amp  amp  contentData optionSelectedWillDisable   value   option contentData optionsStructure valName   gt                option contentData optionsStructure keyName               lt  mat-option gt           lt  mat-select gt

User · Answer

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

User · Answer

The problem for me was that I had   formControlName       Instead of   formControlName

User · Answer

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

User · Answer

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

[loops] Angular 2 Cannot find control with unspecified name attribute on formArrays

Examples related to loops

Examples related to angular

Examples related to angular2-forms