How to check the innerformgroup status im angular reactive form

Question

I have a formgroup named as productForm and inner formgroupName productInnerForm.i can able to see outer form group status and value. by using below markup

{{productForm.status | json}}

{{productForm.value | json}}

when i have tried with innerformgroup status getting error.

<pre>{{productForm.productInnerForm.status | json}}</pre>
 <pre>{{productForm.productInnerForm.value | json}}</pre>

In component also getting undefined. this.productForm.get('productInnerForm').valid which shows undefined.

outer form status is working as expected.

this.productForm.valid;

in component.ts

constructor(public formBuilder : FormBuilder){
}

productForm:FormGroup;

 this.productForm= this.formBuilder.group({
              ProductIDCtrl: '',
           productInnerForm: this.formBuilder.group({
                ProductNameCtrl:[''],
                ProductSUKCtrl:[''],
                ProductStatusCtrl:[''],
                ProductTypeCtrl:['']

              })
            });

    --------------------------------

        <form [formGroup]="productForm" class="secondary-search">

                        <input type="text" formControlName="ProductIDCtrl">


                        <div formGroupName="productInnerForm">
                        <input type="text" formControlName="ProductNameCtrl">
               <input type="text" formControlName="ProductSUKCtrl">

                       <input type="text" formControlName="ProductStatusCtrl">
                      <input type="text" formControlName= "ProductTypeCtrl">
                       </div>

    //For Checking whole form

    <pre>{{productForm.status | json}}</pre>
    <pre>{{productForm.value | json}}</pre>


    How to check the inner form group status .

    <pre>{{productForm.productInnerForm.status | json}}</pre>
    <pre>{{productForm.productInnerForm.value | json}}</pre>



    In component howw to check that

    this.productForm.get('productInnerForm').valid which shows undefined

Answer 1

You can create a getter method for your inner form group:

get productInnerForm(): FormGroup {
  return this.productForm.get('productInnerForm') as FormGroup;
}

And then use it in your component class or the template:

In the class component: console.log(this.productInnerForm.value);

In the template: {{productInnerForm.status | json}} or {{productInnerForm.value | json}} etc.

You can also get access to the inner form group without use get('...') method:

this.productForm.controls['productInnerForm'].value or this.productForm.controls['productInnerForm'].status etc.

I've forked your sb example and added this example, check it out.