Mi componente principal usa un FormGroup y espero que los componentes secundarios informen cambios de valor a su elemento principal. Intento resolver esto usando NG_VALUE_ACCESSOR en el componente secundario para permitir que se comporte como un campo de formulario. Como lo he entendido, uno debe usar las siguientes 4 funciones
writeValue(value) { this.value = value; } registerOnChange(fn: any) { this.onChange = fn; } registerOnTouched(fn: any) { this.onTouch = fn; } setDisabledState?(isDisabled: boolean): void { this.isDisabled = isDisabled; }para comportarse como un campo de formulario. Esta es mi solución actual que no funciona:
https://stackblitz.com/edit/angular-ivy-tpneik?file=src%2Fapp%2Fapp.component.ts
El error actual dice:
Error: no hay valor de acceso para el control de formulario con la ruta: 'ok -> isChecked'
El objetivo es tener un componente secundario (y posiblemente más) que pueda informar sus cambios de valor correctamente al formulario principal en el componente principal. ¿Cómo puedo abordar este problema?
Tiene un formulario separado dentro de su hijo, también está reconstruyendo su formulario hijo allí. Simplemente pase el formgroup anidado construido al niño y estará listo para comenzar. Los padres sabrán lo que está pasando en el niño.
Pase el formgroup hacia abajo como una variable:
<div formGroupName="child"> <app-form [formGroupChild]="formGroupChild" [myArray]="myArray"></app-form> </div>y en el niño, tome la matriz y el grupo de formularios, adjunte un [formGroup] a un div y ¡haga su magia!
<div [formGroup]="formGroupChild"> <div class="container"> <div *ngFor="let category of myArray" [formGroupName]="category.id"> <input type="checkbox" formControlName="isChecked"> <div [style.color]="category.textColor"> {{ category.name }} </div> </div> </div> </div>No hay necesidad de controlvalueaccessor aquí :)
Tu STACKBLITZ bifurcado