Question

我正在尝试迭代我的组件中的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>

Answer 1

从

中删除括号

[formArrayName]="areas"

并仅使用

formArrayName="areas"

这是因为你[ ]试图绑定一个变量，但事实并非如此。另请注意您的提交，应该是：

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

而不是areasForm.values。

这是一个

Demo

：）

Answer 2

在我的情况下，我通过将formControl的名称放在double和sinlge引号中来解决问题，以便将其解释为字符串：

[formControlName]="'familyName'"

Answer 3

而不是

formGroupName="i"

您必须使用：

[formGroupName]="i"

<强>提示：

由于您已经循环控件，因此您已经变量area，因此您可以将其替换为：

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

有关：

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

此外，您不需要使用被动表单将required放在input上。

Answer 4

我的问题是我有

[formControlName]=""

而不是

formControlName=""

Answer 5

这种情况发生在我身上，因为我在某个地方fromArrayName而不是formArrayName

Answer 6

对我来说，我试图添加[formGroupName]="i"和/或formControlName，并且忘记指定父级formArrayName 。注意您的表单组树。

Answer 7

发生这种情况是因为我将formControlName留为空白（formControlName=""）。由于我不需要额外的表单控件，因此我删除了它，并解决了错误。

Answer 8

所以，我有以下代码：

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

Answer 9

只有 WinMerge 让我找到了它（与有效的版本相比）。我在 formGroupName 上遇到了大小写问题。这个词周围的括号会导致同样的问题。

Answer 10

我在创建 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>

Angular 2无法在formArrays上找到具有未指定名称属性的控件

10 个答案:

Demo