在 formArrays 上找不到未指定名称属性的控件。

Question

我正在尝试在我的组件中迭代一个formArray，但是我遇到了以下错误：

错误：找不到未指定名称属性的控件

这是我的类文件中逻辑的样子：

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>

- Bazinga777

Answer 1

从中删除括号

[formArrayName]="areas" 

并且只使用

formArrayName="areas"

之所以这样是因为你试图绑定一个变量，而这不是它的作用。此外，请注意您的提交代码应该是：

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

使用 areasForm.values 的替代方法。

- AT82

---

你的 Plunkr 坏了吗？ - Jess

“and yet [FormGroup]="areasForm" is correct? Angular is really kicking me in the pants....” “[FormGroup]="areasForm" 这样写是正确的吗？Angular 真的让我头疼……” - greg

花括号是我的问题所在，与formGroupName有关。 - Luis Contreras

@ greg 晚来一步... [formGroup]="areasForm"是正确的，因为areasForm是您组件TS中的变量，而areas不是。它是areasForm的属性 :) - AT82

我在我的模板中发现了一个指向第"106"行的错误。结果发现，在那一行之前的formControl拼写错误了！因此，这个错误提示说错误在X行，但实际上是在那之前。 顺便说一下，如果可以的话，请升级到14+。它有类型化表单！ - O-9

Answer 2

在我的情况下，我通过将formControl的名称用单引号和双引号括起来，使其被解释为字符串来解决了这个问题：

[formControlName]="'familyName'"

类似于以下内容：

formControlName="familyName"

- Tobias Gassmann

---

谢谢您的解释。我一直看到formControlName用单引号括起来，但是将其作为字符串传递和作为formControl对象传递之间的区别直到看到这个才恍然大悟。 - Mason240

Answer 3

对我来说问题在于我有

[formControlName]=""

与其

formControlName=""

- smac89

---

我需要从 [formControl] 更改为 formControlName。 - danilo

Answer 4

与其

formGroupName="i"

你必须使用：

[formGroupName]="i"

提示:

由于您正在循环控件，因此已经有了变量area，因此您可以将其替换为以下内容:

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

by:

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

- developer033

---

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

Answer 5

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

- giovannipds

---

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

注意形成分组树帮助了我。 - Krishna

Answer 6

这是因为我在某个地方使用了fromArrayName而不是正确的formArrayName。

- Jacob Stamm

Answer 7

所以，我有这段代码：

<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...只有当我在select本身添加了*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>

- Chema

---

当一个主机模态组件被解除时，我遇到了问题。我不得不使用ngIf来检查在关闭对话框时控件是否仍然可用。 - samneric

Answer 8

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

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

- James L.

Answer 9

Angular 13！formControlName不能为空。

formControlName=""

- Mateen

Answer 10

这种情况发生在我身上，是因为我把一个FormControlName留空了（formControlName=""）。由于我不需要那个额外的表单控件，所以我将其删除后，错误得到了解决。

- Stephanie McNaught