A problem with "No value accessor for form control with name"

Question

I'm preparing a stackblitz for a problem that I have with child-parent communication, but along the way, I've been confronted with a different issue, namely, I'm getting the following error: No value accessor for form control with name: 'endDateFC'. This happens also for startDateFC.

I tried the following things from SO:

1. I added ReactiveFormsModule and FormsModule
2. I removed the duplicates of FormsModule. I have the import only in the app.modules.ts

According to: No value accessor for form control

1. I didn't mix label and input. There is no name collision.
2. I have all declarations, imports, etc.
3. formControlName is located on the value accessor element

What is wrong with my code? Here's the stackblitz: https://stackblitz.com/edit/primeng-calendar-v-zdd3of?file=src/app/postpone-dialog/postpone-dialog.component.ts

Cove

Answer 1

According to this thread and this one to understand, adding ngDefaultControl next to the formcontrol name solves your problem: stackblitz fixed

Clarenceclarenceux

Answer 2

If you implemented ControlValueAccessor but still get the error "No value accessor for form control with name", then DON'T add ngDefaultControl but instead add the missing provider to your @Component(), like so:

providers: [
  { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: MyComponent,
  }
]

Otha

Answer 3

One of the possible reasons: in your component you are using @Input formControl and it conflicts with formControl directive.

Lubricate

Savior! In our case it was very weird, because it only occurred during jest tests but not at runtime... – Broadax