How to get Nested formgroup’s controls in angular

You are close. See code example below or play with it on the very simple (and ugly) StackBlitz I created.

StackBlitz Demo

In your template be sure to add your child form group.

<div>
  <form [formGroup]="myForm" (ngSubmit)="send()">
    <input type="text" name="name" formControlName="name">
    <div formGroupName="child">
       <input type="text" name="id" formControlName="id">
       <input type="text" name="name" formControlName="name">
    </div>
    <button class="btn btn-primary">send</button>
  </form>
</div>

Then in your component you can access the fields like so.

this.myForm['controls'].child['controls'].id.valid

The reactive form I created for this example:

this.myForm = this.fb.group({
      name: ['', [Validators.maxLength(500)]],
      child: this.fb.group({
        id: ['', [Validators.required]],
        name: ['']
      })
    });

**Update Dec 2019**

My original answer is a bit dated. There is now a much cleaner way of accomplishing this! Below is example code of the cleaner solution.

this.myForm.get('child.id').valid

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)