Angular 7 : "Cannot find control with unspecified name attribute"

Question

我正在创建我的第一个 Angular 应用程序，我在开发模式控制台中收到以下错误:

ERROR Error: "Cannot find control with unspecified name attribute"

ERROR Error: "Cannot find control with path: 'items -> name'"

ERROR Error: "Cannot find control with path: 'items -> height'"

我已经阅读了几个 SO 答案(如 this 、 this this 和 this )但我无法确定我做错了什么，我对 Angular 的缺乏经验也无济于事。

这是我的组件 typescript 代码:

import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-pack-input',
  templateUrl: './pack-input.component.html',
  styleUrls: ['./pack-input.component.css']
})
export class PackInputComponent implements OnInit {
  public boxForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {  }

  ngOnInit() {
    this.boxForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createBox()])
    });
  }

  createBox(): FormGroup {
    return this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      height: ['', [Validators.required, Validators.minLength(3)]],
      width: ['', [Validators.required, Validators.minLength(3)]],
      length: ['', [Validators.required, Validators.minLength(3)]],
      weight: ['', [Validators.required, Validators.minLength(3)]]
    });
  }

  get items(): FormArray {
    return this.boxForm.get('items') as FormArray;
  }

  addItem(): void {
    this.items.push(this.createBox());
  }

  public onSubmit(formValue: any) {
    console.log(formValue);
  }
}

这是我的 html 组件代码:

<div>
  <div class="row">
    <h3>Set the box size in meters</h3>
  </div>
  <form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" >
    <div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" [formGroupName]="i" style="margin-bottom: 10px">
      <div class="form-group">
          <div class="col-sm-5 form-group">
            <label for="name">Name</label>
            <input class="form-control" type="text" formControlName="name" placeholder="Name" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Height</label>
            <input class="form-control" type="text" formControlName="height" placeholder="Height" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Width</label>
            <input class="form-control" type="text" formControlName="width" placeholder="Width" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Length</label>
            <input class="form-control" type="text" formControlName="length" placeholder="Length"/>
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Weight</label>
            <input class="form-control" type="text" formControlName="weight" placeholder="Weight" />
          </div>
        <hr>
      </div>
    </div>
    <button class="btn btn-success" type="submit"  style="margin-right: 10px">Pack</button>
    <button class="btn btn-primary" type="button" (click)="addItem()">New Box</button>
  </form>
</div>

我在 typescript 代码中的 formControlName="name" 和 formControlName="height" 中没有看到拼写错误。我完全迷路了。

我在这里做错了什么？

Answer 1

您不应该在同一个元素上使用 FormArrayName 和 FormGroupName:

<div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;">
  <div class="form-group" [formGroupName]="i" >

Ng-run Example