How to check the innerformgroup status im angular reactive form

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

when i have tried with innerformgroup status getting error.

<pre> json</pre>
<pre> json</pre>


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

this.productForm.get('productInnerForm').valid

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> json</pre>
<pre> json</pre>


How to check the inner form group status .

<pre> json</pre>
<pre> json</pre>



In component howw to check that

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


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

console.log(this.productInnerForm.value);

In the template: json or json etc.

json

json

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

get('...')

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

this.productForm.controls['productInnerForm'].value

this.productForm.controls['productInnerForm'].status

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

FormGroup

AbstractControl

get

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.