无法以角度反应形式获得 FormArray 结构

Question

我正在尝试获取具有角度形式的对象数组，但不知何故它失败了，相反，我现在可以将其作为对象获取：

@Input() item = {};

initForm(): void {
    const {
      quantity,
    } = this.item;

    this.myForm = new FormGroup({
      quantity: new FormControl(quantity, numericValidator()),
      commodities: new FormArray([
        new FormGroup({
          imo_class: new FormControl(this.imo_class),
          description: new FormControl(this.description),
          hs_code: new FormControl('')
        })
      ])
    });

    this.myForm.valueChanges.subscribe(this.onFormChange);
  }

我的模板是：

<div
          class="col-xs-6 col-sm-6 col-md-6 col-lg-4"
          formArrayName="commodities"
        >
          <app-input
            labelName="Commodity Code"
            formControlName="hs_code"
            validationName="hs_code"
          ></app-input>

          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
            <app-imo-classes
              optionLabel="imo_class"
              optionKey="description"
              [options]="dangerousGoodsClass"
              (change)="getValues($event)"
            >
            </app-imo-classes>
            <input
              class="imo-class-description"
              formControlName="imo_class"
              [(ngModel)]="description"
            />
            <input
              class="imo-class-description"
              formControlName="description"
              [(ngModel)]="imo_class"
            />
          </div>
        </div>

但是当我将代码修改为：

commodities: new FormGroup({
        imo_class: new FormControl(this.imo_class),
        description: new FormControl(this.description),
        hs_code: new FormControl('')
      })

在我的模板中，我使用formGroupName="commodities" 而不是formArrayName="commodities"，我可以获得正确的对象。

但问题是我希望该对象包含在一个数组中，所以知道为什么会出现这种行为吗？

Answer 1

FormArray 是一个数组。您必须使用ngFor 来访问每个元素。

<div
  class="col-xs-6 col-sm-6 col-md-6 col-lg-4">

  <div *ngFor="let commodity of myForm.get('commodities')?.controls" [formGroup]="commodity">
    <app-input
      labelName="Commodity Code"
      formControlName="hs_code"
      validationName="hs_code"
    ></app-input>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <app-imo-classes
        optionLabel="imo_class"
        optionKey="description"
        [options]="dangerousGoodsClass"
        (change)="getValues($event)"
      >
      </app-imo-classes>
      <input
        class="imo-class-description"
        formControlName="imo_class"
        [(ngModel)]="description"
      />
      <input
        class="imo-class-description"
        formControlName="description"
        [(ngModel)]="imo_class"
      />
    </div>
  </div>

</div>