What causes the "control.registerOnChange is not a function" error

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".

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.

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" />