Accessing FormArray inside nested FormGroup , angular6

Question

I have a simple reactive form

  ngOnInit() {
    this.outerForm = this._formBuilder.group({
      firstFormGroup: this._formBuilder.group({
        nserNumber: ['', [Validators.required, Validators.pattern(this.spacePattern)]],            
      }),
      secondFormGroup: this._formBuilder.group({
        nser1Number: ['', [Validators.required, Validators.pattern(this.spacePattern)]],
        connectionRow: this._formBuilder.array([{
          connectionType: [''],
          switchHostname: ['']
        }])
      })
    });
  }

I am able to display this in UI. But I am unable to display connectionRow

<fieldset formGroupName="secondFormGroup">
      <input matInput placeholder="PID number" id='nser1Number' formControlName="nser1Number">

    <div class='formRow' *ngFor="let itemrow of connectionRow.controls; let i=index" [formGroupName]="i">
        {{i}}
    </div>
  </fieldset>

ERROR TypeError: Cannot read property 'controls' of undefined

Please help

wouldn't it be let itemrow of secondFormGroup.connectionRow ? — Akber Iqbal
– Akber Iqbal, Commented Mar 13, 2019 at 10:16
or even outerForm.get('secondFormGroup').get('connectionRow').controls. You can put it in a gette and just use it in you template — miselking
– miselking, Commented Mar 13, 2019 at 10:20

Sharan Mohandas · Accepted Answer · 2019-03-14 05:05:49Z

2

You missed to mention formArrayName in the template.

Update in the HTML

<fieldset formGroupName="secondFormGroup">
    <input matInput placeholder="PID number" id='nser1Number' formControlName="nser1Number">
    <div formArrayName="connectionRow">
        <div class='formRow' *ngFor="let itemrow of connectionRow.controls; let i=index" [formGroupName]="i">
            <input matInput placeholder="Tenant" formControlName="connectionType">
            <input matInput placeholder="Tenant" formControlName="switchHostname">
        </div>
    </div>
</fieldset>

And in the TS file

get connectionRow(): FormArray {
    return this.outerForm.get('secondFormGroup').get("connectionRow") as FormArray;
}
enter code here

To handle errors for each input wrap them inside a mat-form-field container. You may refer the below

<mat-form-field>
    <input matInput placeholder="Enter your email" formControlName="connectionType" required>
    <mat-error *ngIf="connectionRow.controls[i].connectionType.invalid">Your message</mat-error>
</mat-form-field>

edited Mar 14, 2019 at 5:05

answered Mar 13, 2019 at 12:23

Sharan Mohandas

8691 gold badge9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

raju Over a year ago

Yeah that works, just can you plz tell me how I can add error field under the input?

Sharan Mohandas Over a year ago

@raju Please Mark the answer as correct if it helped you

Collectives™ on Stack Overflow

Accessing FormArray inside nested FormGroup , angular6

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related