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.

You must push an element to array "pairs", so you can see it in the view. — Yoarthur, Dec 13 '18 at 00:29
Try < form *ngIf="frm" [formGroup]="frm" >. This "*ngIf" avoid an error when your frm is not defined (at very early time in your aplicattion -before you give data-) — Eliseo, Dec 13 '18 at 07:47

score 1 · Accepted Answer · answered Jan 04 '19 at 18:40

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

score 0 · Answer 2 · answered Dec 13 '18 at 00:47

0

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

answered Dec 13 '18 at 00:47

Muhammad Al Faris

166
1
3

Angular Reactive Forms with FormArray inside a nested FormGroup

2 Answers2