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

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.

这是一个

演示

:)

Answer 2

在我的例子中,我通过将formControl的名称放在double和sinlge引号中来解决问题,以便将其解释为字符串:

[formControlName]="'familyName'"

Answer 3

我的问题是我有

[formControlName]=""

代替

formControlName=""

Answer 4

代替

formGroupName="i"

你必须使用:

[formGroupName]="i"

小贴士:

由于你循环控件,你已经是变量area,所以你可以替换它:

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

对于:

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

此外,你不需要把required上input使用反应形式.

Answer 5

对于我来说，我是想添加[formGroupName]="i"和/或formControlName与遗忘指定父formArrayName。注意您的表单组树。