Bdtjtk

I've found a lot of examples, also other questions that have been answered. Including this one that seems pretty clear, but I still can't make my case work.

I have the following Angular reactive form (which seems ok, if I compare to the linked question's answer):

this.frm = this.fb.group({

  // ... a bunch of other groups

  // and then:



  custom_data: this.fb.group({

    pairs: this.fb.array([

      this.fb.group({

        custom_key: '',

        custom_value: ''

      })

    ]),

    expire_date: '',

    active: ['', Validators.required]

  })

});

I can't make it render in the view, no matter what I've tried, I get an error. This is the latest/current piece of code that I got to, after all the other answers and google results I could find:

<form [formGroup]="frm">



  <fieldset>

    <legend>Custom Data:</legend>



    <ng-container formGroupName="custom_data">

      <div class="row">



        <div formArrayName="pairs">

          <div *ngFor="let pair of custom_data.get('pairs').controls; let i = index">

            <div [formGroupName]="i">

              <input type="text" formControlName="custom_key" placeholder="Custom key" />

              <input type="text" formControlName="custom_value" placeholder="Custom value" />

            </div>

          </div>

        </div> <!-- / end FormArray -->



        <div class="col-xs-6">

          <div class="form-group">

            <label class="control-label">Expires</label>

            <input type="text" formControlName="expire_date" class="form-control" />

          </div>

        </div>



        <div class="col-xs-6">

          <div class="form-group">

            <label class="control-label">Active<sup>*</sup></label>

            <select formControlName="active" class="form-control">

              <option value="1">Yes</option>

              <option value="0">No</option>

            </select>

          </div>

        </div>



      </div>

    </ng-container>

  </fieldset>    

</form>

I've tried all of the following, without any luck:

<div *ngFor="let pair of custom_data.get('pairs').controls; let i = index">

<div *ngFor="let pair of pairs.controls; let i = index">

<div *ngFor="let pair of frm.controls['custom_data'].get('pairs').controls; let i = index">

I'm not even sure if a FormArray is a Control or a Group or what is it, every usage I find seems so unique and complicated.

You must push to the array, you can check this link for example

So I ended up redoing it from scratch.
Weird thing... it turns out that the 3rd thing I've tried eventually worked:

<div *ngFor="let pair of frm.controls['custom_data'].get('pairs').controls; let i = index">

Not sure why it didn't work the first time.

One thing to note: I also discovered that I get an error when doing a production build. In order to solve that, I had to add this method in my component's class:

myFormArray() {

  return this.frm.controls['custom_data'].get('pairs') as FormArray;

}

and then, in my template, use the method:

<div *ngFor="let pair of myFormArray().controls; let i = index">

(which is really weird and shouldn't be necessary, if you ask me...)