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

Posted 2023-03-13

【中文标题】无法以角度反应形式获得 FormArray 结构

【英文标题】：Cannot get FormArray structure in angular ReactiveForm

【发布时间】：2021-06-20 17:14:48

【问题描述】：

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

@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"，我可以获得正确的对象。

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

【参考方案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>

【讨论】：

你刚刚救了我！它就像一个魅力，谢谢！

请删除[(ngModel)]。因此，您使用的是反应式表单，不与模板驱动的表单混合使用。如果你想赋予价值，你应该在初始化 FormArray 或使用 pathValue