我正在尝试迭代组件中的 formArray,但出现以下错误
Error: Cannot find control with unspecified name attribute
这是我的类文件中的逻辑
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()])
});
}
}
和我的模板文件
<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>
取下
中的括号[formArrayName]="areas"
并且仅使用
formArrayName="areas"
这个,因为使用
[ ]
你试图绑定一个 变量,但这不是。另请注意您的提交,它应该是:
(ngSubmit)="onSubmit(areasForm.value)"
而不是
areasForm.values
。
在我的例子中,我通过将 formControl 的名称放在双引号和单引号中解决了这个问题,以便将其解释为字符串:
[formControlName]="'familyName'"
类似下图:
formControlName="familyName"
对我来说问题是我有
[formControlName]=""
而不是
formControlName=""
而不是
formGroupName="i"
您必须使用:
[formGroupName]="i"
提示:
由于您循环遍历控件,因此您已经有了变量
area
,因此您可以替换它:
*ngIf="areasForm.get('areas').controls[i].name.hasError('required')"
作者:
*ngIf="area.hasError('required', 'name')"
对我来说,我试图添加
[formGroupName]="i"
和/或formControlName
并且忘记指定父级formArrayName
。注意您的表单组树。
这发生在我身上,因为我在某个地方有
fromArrayName
而不是 formArrayName
😑
所以,我有这个代码:
<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,并且收到了我们正在讨论的错误,这对我来说没有任何意义,因为我没有使用 formgroups 或 formarrays...当我将 *ngIf 添加到选择它自己,因此在它实际存在之前不会被使用。这就是解决我的问题的方法。
<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>
对我来说,问题是我在表单生成器中缺少字段名称:
return this.fb.group({
name: ['', [Validators.required]],
latLong: ['', [Validators.required]],
details: ['', [Validators.required]],
// missing field name!
});
这发生在我身上,因为我将 formControlName 留空(
formControlName=""
)。由于我不需要额外的表单控件,因此我将其删除并解决了错误。
只有 WinMerge 让我找到了它(与有效的版本进行比较)。 我在 formGroupName 上遇到了大小写问题。 这个词两边的括号可能会导致同样的问题。
我在创建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)
});
}
然后我做的时候在html中失败了
<kendo-dropdownlist id="ps-dpts-dropdown" [data]="psDepartments" textField="ConCatedName" valueField="Id"
[formControl]="formGroup.get('DepartmentId')" [valuePrimitive]="true">
</kendo-dropdownlist>
角13!
formControlName
不应为空。
formControlName=""
这是因为 formControlName='' 为空。
就我而言,我在使用
ngOnInit()
时忘记初始化 [formControl]="customForm"
中的表单。