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'.
You are close. See code example below or play with it on the very simple (and ugly) StackBlitz I created.
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: ['']
})
});
this.myForm.get('child.id').valid