Angular 2 Cannot find control with unspecified name attribute on formArrays

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>
189785 次浏览
小开

而不是

formGroupName="i"

你必须使用:

[formGroupName]="i"

提示 :

因为您在控件上循环，所以已经有了变量 area，所以您可以替换以下内容:

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

作者:

*ngIf="area.hasError('required', 'name')"
小开
最佳答案

从。中移除支架

[formArrayName]="areas"

只能使用

formArrayName="areas"

这是因为使用 [ ]时，您试图绑定 变量，而这不是。还要注意你的提交，它应该是:

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

instead of areasForm.values.

小开

我的问题是

[formControlName]=""

而不是

formControlName=""
小开

在我的例子中，我通过将 formControl 的名称放在双引号和单引号中来解决这个问题，这样它就被解释为一个字符串:

[formControlName]="'familyName'"

类似如下:

formControlName="familyName"
小开

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

小开

对我来说，我试图添加 [formGroupName]="i"和/或 formControlName和 forgetting to specify the parent formArrayName。请注意你的表单组树。

小开

这种情况发生在我身上，因为我留下了一个 formControlName 空白(formControlName="")。因为我不需要额外的表单控件，所以我删除了它并解决了错误。

小开

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>

这里我使用的是独立的 formControl，我得到的是我们正在讨论的错误，这对我来说没有任何意义，因为我没有使用 formgroup 或 formarray... 它只有在我将 * ngIf 添加到 select it self 时才消失，所以在它实际存在之前没有被使用。这就解决了我的问题。

<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>
小开

只有 WinMerge 让我找到了它(与一个可以工作的版本相比)。 我在 formGroupName 上遇到了一个案例问题。 这个单词的括号可能导致同样的问题。

小开

在创建表单 Group 时，我不小心输入了控件名称:

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>
小开

对我来说，问题是我在表单生成器中遗漏了字段名:

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

角度13! formControlName不应该空。

formControlName=""

提交答案