Tengo un componente que toma FormGroup como @Input.
componente principal:
parentGroup = fb.group({ childGroup: fb.group({ nestedControl: fb.control([]) }) }) <app-my-component [formGroup]="myGroup">Luego, en el componente hijo tengo:
@Input formGroup: FormGroup <div *ngIf="formGroup.controls.childGroup.controls.nestedControl === true"> some content </div>me sale un error
error TS2339: Property 'controls' does not exist on type 'AbstractControl'.Supongo que el control secundario no conoce la estructura de la entrada formGroup. ¿Cómo encasillé AbstractControl a FormGroup dentro de la plantilla? Supongo que puedo hacer una función que se convierta en el archivo .ts y devuelva formGroup, pero eso parece engorroso. ¿Alguna forma de hacerlo en la plantilla? ¿Alguna otra solución inteligente? :)
En el componente secundario, ese error en realidad apunta a su grupo anidado. Angular no sabe que childGroup es un FormGroup. No veo por qué no podría simplemente enviar al niño el FormGroup anidado en lugar del formulario completo. En primer lugar, su código se vuelve más corto en la plantilla ya que no necesita desplazarse hacia abajo, en segundo lugar, ese error se corrige ya que puede escribir que childGroup es un FormGroup :)
padre:
<app-my-component [formGroup]="myGroup.get('childGroup')">y niño:
@Input() formGroup: FormGroup; <div *ngIf="formGroup.get('nestedControl') === true"> some content </div> Note que también usé get . Yo prefiero eso :)
EDITAR: si necesita pasar el grupo de formulario principal, puede acceder a las propiedades anidadas tal como lo usamos en los objetos JS, es decir, usando . :
<div *ngIf="formGroup.get('childGroup.nestedControl').value === true">