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

Question

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%2Fapp%2Fapp.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?

AVJT82 · Accepted Answer · 2021-11-05 18:13:20Z

2

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

answered Nov 5, 2021 at 18:13

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

maac Over a year ago

Thank you!! Would the NG_VALUE_ACCESSOR only be the appropriate choice if the child component consisted of only formcontrols perhaps?

AVJT82 Over a year ago

As long as you pass an actual formarray/formgroup/formcontrol as a variable to a child there is no need to implement ng_value_accessor, as they are connected to the parent form, being objects and all, objects being mutable. If you are starting to tinker with custom things, then ng_value_accessor is needed.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related