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

Posted 2023-03-13

【中文标题】Angular 2在formArrays上找不到具有未指定名称属性的控件

【英文标题】：Angular 2 Cannot find control with unspecified name attribute on formArrays

【发布时间】：2017-09-12 06:13:30

【问题描述】：

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

【参考方案1】：

而不是

formGroupName="i"

你必须使用：

[formGroupName]="i"

提示：

由于您正在循环控制控件，因此您已经有了变量area，因此您可以替换它：

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

作者：

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

【讨论】：

谢谢，这似乎是问题的一部分，但上面的答案解决了我的问题。

【参考方案2】：

去掉括号

[formArrayName]="areas" 

并且只使用

formArrayName="areas"

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

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

而不是areasForm.values。

【讨论】：

你的 plunkr 坏了吗？

然而 [FormGroup]="areasForm" 是正确的吗？ Angular 真的把我踢到了裤子里……

在我的情况下，大括号是 formGroupName 的问题

@greg 迟到评论...[formGroup]="areasForm" 是正确的，因为areasForm 是组件 TS 中的一个变量，而 areas 不是。它是areasForm 的财产 :)

【参考方案3】：

对我来说问题是我有

[formControlName]=""

代替

formControlName=""

【讨论】：

我需要从 [formControl] 更改为 formControlName

【参考方案4】：

在我的例子中，我通过将 formControl 的名称放在双引号和单引号中来解决问题，以便将其解释为字符串：

[formControlName]="'familyName'"

类似如下：

formControlName="familyName"

【讨论】：

感谢您的解释。我一直看到 formControlName 用单引号括起来，但是将它作为字符串传递与 formControl 对象之间的区别直到看到这个才单击。

【参考方案5】：

这发生在我身上，因为我在某个地方有 fromArrayName 而不是 formArrayName ?

【参考方案6】：

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

【讨论】：

我也同时使用了这两种方法。请记住将formArrayName 放在层次结构中比[formGroupName]="i" 更高的DOM 元素上（例如，在循环元素上：<div *ngFor=let ctrl of formArrayCtrl; let i = index"><div [formGroupName]="i"></div></div>）

注意表单组树帮了我。

【参考方案7】：

这发生在我身上，因为我将 formControlName 留空 (formControlName="")。由于我不需要那个额外的表单控件，因此我将其删除并解决了错误。

【参考方案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>

【讨论】：

当主机模式组件被解除时，我遇到了问题。关闭对话框时，我必须使用 ngIf 检查控件是否仍然可用。

【参考方案9】：

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

【参考方案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>

【参考方案11】：

对我来说，问题是我在表单构建器中缺少字段名称：

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