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

There are a couple of very simple ways to access the FormControl in a nested FormGroup. From the AbstractControl usage notes:

Retrieve a nested control

For example, to get a name control nested within a person sub-group:

this.form.get('person.name');

-OR-

this.form.get(['person', 'name']);

userForm=new FormGroup({
    fName:new FormControl('',Validators.required),
    lName:new FormControl(),
    eMail:new FormControl('',[Validators.email,Validators.required]),
    qualificationForm:new FormGroup({
     perS:new FormControl(''),
     perHs:new FormControl('')
    })
});

save(){
  console.log(this.userForm.get("qualificationForm.perS").value);
}