为什么 FormArrayGroup 在 Angular 中与嵌套表单组一起使用时会抛出错误？

Question

我有一个如下所示的表单组：

this.addressInfoForm = new FormGroup({
      addressLine1: new FormControl("", [Validators.required]),
      addressLine2: new FormControl("", []),
      city: new FormControl("", [Validators.required]),
      province: new FormControl("", []),
      postalCode: new FormControl("", [Validators.required]),
      country: new FormControl({ value: "", disabled: true }, [
        Validators.required
      ]),
      stuff: new FormGroup({
        x1: new FormControl("x1"),
        x2: new FormControl("x2")
      }),
      email: new FormControl("", [Validators.email]),
      phones: this.fb.array([
        this.fb.group({
          phoneNumber: "",
          phoneType: ""
        })
      ])
    });

我不知道为什么我的 formArrayGroup 没有渲染手机并抛出错误

ERROR
Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
directive and pass it an existing FormGroup instance (you can create one in your class).

这是我的 html

<hello class="d-flex justify-content-center align-items-center mt-4" name="{{ name }}"></hello>

<div class="d-flex justify-content-center align-items-center mt-4">
  <form [formGroup]="addressInfoForm">
    <div class="form-group">
      <label for="exampleFormControlInput1">Address 1</label>
      <input
        type="email"
        class="form-control"
        id="exampleFormControlInput1"
        placeholder="Please Enter Address 1"
        formControlName="addressLine1"
      />
    </div>
    <div class="form-group">
      <label for="exampleFormControlInput2">Address 2</label>
      <input
        type="email"
        class="form-control"
        id="exampleFormControlInput2"
        placeholder="Please Enter Address 2"
        formControlName="addressLine2"
      />
    </div>
    <div class="form-group">
      <label for="exampleFormControlInput3">city</label>
      <input
        type="email"
        class="form-control"
        id="exampleFormControlInput3"
        placeholder="Please Enter City"
        formControlName="city"
      />
    </div>
    <div class="form-group">
      <label for="exampleFormControlInput4">Province</label>
      <input
        type="email"
        class="form-control"
        id="exampleFormControlInput4"
        placeholder="Please Enter Province"
        formControlName="province"
      />
    </div>
    <div class="form-group">
      <label for="exampleFormControlInput5">Postal Code</label>
      <input
        type="email"
        class="form-control"
        id="exampleFormControlInput5"
        placeholder="Please Enter Postal Code"
        formControlName="postalCode"
      />
    </div>
    <div class="form-group">
      <label for="exampleFormControlInput6">Country</label>
      <input
        type="email"
        class="form-control"
        id="exampleFormControlInput6"
        placeholder="Please Enter Country"
        formControlName="country"
      />
    </div>

    <div class="mt-4" formGroupName="stuff">
      <div class="form-group">
        <label for="exampleFormControlInput6">X1</label>
        <input
        type="text"
        class="form-control"
        formControlName="x1"
      />
      </div>
      <div class="form-group">
        <label for="exampleFormControlInput6">X2</label>
        <input
        type="text"
        class="form-control"
        formControlName="x2"
      />
      </div>
    </div>

    <div class="form-group">
      <label for="exampleFormControlInput7">Email</label>
      <input
        type="email"
        class="form-control"
        id="exampleFormControlInput7"
        placeholder="name@example.com"
        formControlName="email"
      />
    </div>

    <button type="button" class="btn btn-primary mt-1" (click)="AddPhone()">
      Add Phone
    </button>
    <div class="mt-4" formArrayName="phones">
      <div *ngFor="let phone of phones.controls; let i=index; let j=index">
        <form [formGroupName]="i">
          <div class="form-group">
            <label for="phone{{i + 1}}">Phone No {{i + 1}}</label>
            <input
          type="email"
          class="form-control"
          id="phone{{i + 1}}"
          formControlName="phoneNumber"
          placeholder="name@example.com"
        />
          </div>
          <div class="form-group">
            <label for="phonetype{{i + 1}}">Phone Type {{i + 1}}</label>
            <input
          type="email"
          class="form-control"
          id="phonetype{{i + 1}}"
          formControlName="phoneType"
          placeholder="name@example.com"
        />
          </div>
        </form>
      </div>
    </div>
  </form>
</div>

我在 stackblitz 上创建了一个示例 here

如果您删除了 FormArray 的 html 部分，该应用程序将正常运行。如果您删除了嵌套组的 html 部分，该应用程序将正常运行。这差点让我失望认为嵌套的表单组和表单数组不能一起使用！？

如您所见，它检测到我的数组中有 2 部手机，并且表单生成器正在按预期呈现它。出于某种原因我无法弄清楚！！

Answer 1

删除 formArray 中的“表单”
删除 *ngFor
将 [formGroupName]="i" 放入 *ngFor

    <div class="mt-4" formArrayName="phones">
          <div *ngFor="let phone of phones.controls; let i=index;" [formGroupName]="i">
              <div class="form-group">
                <label for="phone{{i + 1}}">Phone No {{i + 1}}</label>
                <input
              type="email"
              class="form-control"
              id="phone{{i + 1}}"
              formControlName="phoneNumber"
              placeholder="name@example.com"
            />
              </div>
              <div class="form-group">
                <label for="phonetype{{i + 1}}">Phone Type {{i + 1}}</label>
                <input
              type="email"
              class="form-control"
              id="phonetype{{i + 1}}"
              formControlName="phoneType"
              placeholder="name@example.com"
            />
              </div>
          </div>

Your forked stackblitz

为什么 FormArrayGroup 在 Angular 中与嵌套表单组一起使用时会抛出错误？

Why FormArrayGroup is throwing an error when it is used with nested form group in Angular?

angular

angular-reactive-forms