Cannot get FormArray structure in angular ReactiveForm

Question

I'm trying to get an array of objects with angular form but somehow it is failing and instead, I can get it as an object for now:

@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);
  }

and my template is:

<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>

but when I modify my code to:

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

and in my template I use formGroupName="commodities" instead of formArrayName="commodities" I can get a correct object.

but the issue is that I want that object inside an array, so any idea why is that behavior?

Answer 1

FormArray is an array. You have to use ngFor to access each element.

<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>