angular

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

  • 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