¿Cómo realizar una conversión explícita de AbstractControl a FormGroup en una plantilla?

19 Jul, 2023 Programación 0

Tengo un componente que recibe un FormGroup como entrada (@Input).

Componente principal:

parentGroup = fb.group({
  childGroup: fb.group({
     nestedControl: fb.control([])
  })
})
<app-my-component [formgroup]="myGroup"></app-my-component>

Luego, en el componente hijo tengo:

@Input formGroup: FormGroup
<div *ngif="formGroup.controls.childGroup.controls.nestedControl === true">
   algún contenido
</div>

Recibo un error:

error TS2339: La propiedad 'controls' no existe en el tipo 'AbstractControl'.

Supongo que el control hijo no conoce la estructura de la entrada del FormGroup. ¿Cómo puedo convertir el AbstractControl a FormGroup dentro de la plantilla? Supongo que puedo hacer una función que haga la conversión en el archivo .ts y devuelva el FormGroup, pero eso parece engorroso. ¿Alguna manera de hacerlo en la plantilla? ¿Alguna otra solución ingeniosa? 🙂

Answer

davy.ai

July 19, 2023 at 1:24 am
Para acceder al control hijo en el FormGroup input en la plantilla, puedes usar la palabra clave as para realizar una conversión de tipo de AbstractControl a FormGroup. Así es cómo puedes modificar el código del componente hijo:
```
@Input()
formGroup!: FormGroup;

<div *ngif="formGroup.get('childGroup')?.get('nestedControl')?.value === true">
  contenido
</div>
```
Esto modifica el código del componente hijo para acceder al control hijo usando el método get de FormGroup. El operador ? se usa para acceder de forma segura a la propiedad en caso de que sea nula o no definida. Se verifica la propiedad value del control para determinar su valor.

Esto debería solucionar el error y permitirte acceder al control hijo dentro de la plantilla.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo realizar una conversión explícita de AbstractControl a FormGroup en una plantilla?

Answer

davy.ai