Angular 7: "Cannot find control with unspecified name attribute"
Solution 1
You shouldn't use FormArrayName and FormGroupName on the same element:
<div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;">
<div class="form-group" [formGroupName]="i" >
Solution 2
Try to declare your formGroupName one layer further down, like so:
<div>
<div class="row">
<h3>Set the box size in meters</h3>
</div>
<form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" >
<div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" style="margin-bottom: 10px">
<div class="form-group" [formGroupName]="i">
<div class="col-sm-5 form-group">
<label for="name">Name</label>
<input class="form-control" type="text" formControlName="name" placeholder="Name" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Height</label>
<input class="form-control" type="text" formControlName="height" placeholder="Height" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Width</label>
<input class="form-control" type="text" formControlName="width" placeholder="Width" />
</div>
<div class="col-sm-3 form-group">
<label for="name">Length</label>
<input class="form-control" type="text" formControlName="length" placeholder="Length"/>
</div>
<div class="col-sm-3 form-group">
<label for="name">Weight</label>
<input class="form-control" type="text" formControlName="weight" placeholder="Weight" />
</div>
<hr>
</div>
</div>
<button class="btn btn-success" type="submit" style="margin-right: 10px">Pack</button>
<button class="btn btn-primary" type="button" (click)="addItem()">New Box</button>
</form>
</div>
dazito
Updated on February 11, 2020Comments
-
dazito over 4 years
I am creating my first Angular app and I am getting the following errors in dev mode console:
ERROR Error: "Cannot find control with unspecified name attribute"
ERROR Error: "Cannot find control with path: 'items -> name'"
ERROR Error: "Cannot find control with path: 'items -> height'"
I have read several SO answers (like this, this this and this) but I cannot pinpoint what I am doing wrong, my inexperience with Angular is not helping as well.
This is my component typescript code:
import {Component, OnInit} from '@angular/core'; import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'app-pack-input', templateUrl: './pack-input.component.html', styleUrls: ['./pack-input.component.css'] }) export class PackInputComponent implements OnInit { public boxForm: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.boxForm = this.formBuilder.group({ items: this.formBuilder.array([this.createBox()]) }); } createBox(): FormGroup { return this.formBuilder.group({ name: ['', [Validators.required, Validators.minLength(3)]], height: ['', [Validators.required, Validators.minLength(3)]], width: ['', [Validators.required, Validators.minLength(3)]], length: ['', [Validators.required, Validators.minLength(3)]], weight: ['', [Validators.required, Validators.minLength(3)]] }); } get items(): FormArray { return this.boxForm.get('items') as FormArray; } addItem(): void { this.items.push(this.createBox()); } public onSubmit(formValue: any) { console.log(formValue); } }
And here is my html component code:
<div> <div class="row"> <h3>Set the box size in meters</h3> </div> <form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" > <div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" [formGroupName]="i" style="margin-bottom: 10px"> <div class="form-group"> <div class="col-sm-5 form-group"> <label for="name">Name</label> <input class="form-control" type="text" formControlName="name" placeholder="Name" /> </div> <div class="col-sm-3 form-group"> <label for="name">Height</label> <input class="form-control" type="text" formControlName="height" placeholder="Height" /> </div> <div class="col-sm-3 form-group"> <label for="name">Width</label> <input class="form-control" type="text" formControlName="width" placeholder="Width" /> </div> <div class="col-sm-3 form-group"> <label for="name">Length</label> <input class="form-control" type="text" formControlName="length" placeholder="Length"/> </div> <div class="col-sm-3 form-group"> <label for="name">Weight</label> <input class="form-control" type="text" formControlName="weight" placeholder="Weight" /> </div> <hr> </div> </div> <button class="btn btn-success" type="submit" style="margin-right: 10px">Pack</button> <button class="btn btn-primary" type="button" (click)="addItem()">New Box</button> </form> </div>
I see no typo in the
formControlName="name"
andformControlName="height"
in the typescript code. I am totally lost.What am I doing wrong here?
-
AT82 over 5 yearsThank you for reminding me of ng-run (great job with that pal!) :)
-
HDs Sergiu over 3 yearsThanks, saved me from going insane :)) I did something similar, and i had it like model , but couldn't figure it out that my formarrayname is on the parent element until i saw this solution