Angular - no value accessor for form control in component with nested FormGroup-CodePudding

My parent component uses a FormGroup and I expect the child components to report value changes to its parent. I try to solve this by using NG_VALUE_ACCESSOR in the child component to allow it to behave as a form field. As I've understood it one should use the 4 following functions

writeValue(value) {
    this.value = value;
}

registerOnChange(fn: any) {
    this.onChange = fn;
}

registerOnTouched(fn: any) {
    this.onTouch = fn;
}

setDisabledState?(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
}

in order to behave as a form field. This is my current non-working solution:

https://stackblitz.com/edit/angular-ivy-tpneik?file=src/app/app.component.ts

The current error says:

Error: No value accessor for form control with path: 'ok -> isChecked'

The goal is to have a child component (and possible more) that can report its valuechanges correctly to the parent form in the parent component. How can I approach this problem?

CodePudding user response：

You have a separate form inside your child, also you are rebuilding your child form there. Just pass the the built nested formgroup to the child and you are good to go. Parent will know what's going on in the child.

Pass the formgroup down as a variable:

<div formGroupName="child">
  <app-form [formGroupChild]="formGroupChild" [myArray]="myArray"></app-form>
</div>

and in the child, grab the array and formgroup, attach a [formGroup] to a div and do your magic!

<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 need for controlvalueaccessor here :)

Your forked STACKBLITZ