Siguiendo mi formulario:
this.form= this.fb.group({ id: ['', [Validators.required]], name: ['', [Validators.maxLength(500)]], child: this.fb.group({ id: [ '', [Validators.required]], name: [''] }) }); Quiero obtener la validez de child, como this.form.controls.child.controls.valid , mientras que .controls renturn AbstractControl se refiere a esta API de formgroup.
error de compilación angular, error TS2339: la propiedad 'controles' no existe en el tipo 'AbstractControl'.
Estás cerca. Vea el ejemplo de código a continuación o juegue con él en el muy simple (y feo) StackBlitz que creé.
En su plantilla, asegúrese de agregar su grupo de formulario secundario.
<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>Luego, en su componente, puede acceder a los campos así.
this.myForm['controls'].child['controls'].id.valid
La forma reactiva que creé para este ejemplo:
this.myForm = this.fb.group({ name: ['', [Validators.maxLength(500)]], child: this.fb.group({ id: ['', [Validators.required]], name: [''] }) });Mi respuesta original es un poco anticuada. ¡Ahora hay una manera mucho más limpia de lograr esto! A continuación se muestra el código de ejemplo de la solución más limpia.
this.myForm.get('child.id').valid
Hay un par de formas muy sencillas de acceder a FormControl en un FormGroup anidado. De las notas de uso de AbstractControl:
Recuperar un control anidado
Por ejemplo, para obtener un control de nombre anidado dentro de un subgrupo de personas:
this.form.get('persona.nombre');
-O-
this.form.get(['persona', 'nombre']);
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); }