How to get Nested formgroup's controls in angular

https://angular.io/api/forms/FormGroup#controls

Follwing my form:

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

I want to get the validity of child, like this.form.controls.child.controls.valid, while .controls renturn AbstractControl refer to this formgroup api.

angular compile error, error TS2339: Property 'controls' does not exist on type 'AbstractControl'.

Solution 1:

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

Solution 2:

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']);

Solution 3:

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);
}

Solution 4:

One way i use alot is to cast the sub formGroup into a form group as the 'get()' method returns an abstractControl and use the 'get()' method to extract the control of the nested formGroup like so :

(this.form.get('child') as FormGroup).get('id').valid