What causes the “control.registerOnChange is not a function” error

Question

I have a form using the reactive form approach. The form is created as follow in my pug:

form([formGroup]=\'form\', novalidate=\'\', (ngSubmit)=\'postSurvey(         


        

Answer 1

Yes, that error message is a bit cryptic, but if you use FormBuilder, you would see this when you added a control to FormGroup in your component and named it "A", but then either forgot to add input with formControlName="A" to your template, or formControlName for the intended input is not A, or empty, or not present.

Basically, it says: "I cannot match the control I have in FormGroup to the control in the template".

Answer 2

to me it happened when I used same [formControl]="carBrand" and [matAutocomplete]="carBrandAuto" from my autocomplete input

I changed this

FROM:

...
<input
  [formControl]="carBrand"
  [matAutocomplete]="carBrand"
>
<mat-autocomplete matAutocomplete #carBrand="matAutocomplete">
...

TO

...
<input
  [formControl]="carBrand"
  [matAutocomplete]="carBrandAuto"
>
<mat-autocomplete matAutocomplete #carBrandAuto="matAutocomplete">
...

Answer 3

I came across looking for a solution to the similar issue and then found a solution myself. My issue was the following. I had a form like this

form: FormGroup = new FormGroup({
  status: new FormArray([])
});

Initially it was represented by the list of checkboxes for each status on the template. And then I created a custom component to represent status selector and used it in template like so

<status-selector [formControlName]="'status'"></status-selector>

The problem is that formControlName must point to FormControl instance, but actually it was pointing to a FormArray instance. So, changing to status: new FormControl([]) fixed this issue for me.

Answer 4

Maybe you have moved a control element outside the group in the template.

OK:

<div formGroupName="passwordForm">
     Password: <input type="password" formControlName="password">
     Confirm: <input type="password" formControlName="confirmPassword">
</div>

Not OK:

Password: <input type="password" formControlName="password">
<div formGroupName="passwordForm">
     Confirm: <input type="password" formControlName="confirmPassword">
</div>

Answer 5

In my case the error occurred when the formControl name was same as a template variable on the page. For example

<select id="status" [formControl]="userStatus">...</select>

<form-status #userStatus ></form-status> //matching template variable name

Answer 6

In my case this error was thrown because I was using FormControlName instead of FormArrayName to bind to a FormArray in my template.

My component code:

public form = new FormGroup({
   ...
   checkboxes: new FormArray([....])
})

My template code that threw error:

<input type="checkbox" formControlName="checkboxes" />

Fix:

<input type="checkbox" formArrayName="checkboxes" />