Angular Reactive Forms with FormArray inside a nested FormGroup

Question

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.

Answer 1

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

Answer 2

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