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

Adding in what was causing it in my situation.

.ts file,

...

export class MyComponent {
  dateFrom = new FormControl(new Date());
...
}

.html file,

Basically, within the template file, it didn't know which 'dateFrom' to choose, and chooses the one in the template file, which isn't the FormControl in my typescript file, it's the mat-datepicker element in the template file.

Renaming the FormControl to dateFromCtrl fixed this,

i.e.

...

export class MyComponent {
  dateFromCtrl = new FormControl(new Date());
...
}

.html file,

Works as expected.

Kodos to VS Code for figuring this out. I got pushed this direction by doing a Cmd + Click on the initial 'dateFrom' at [formControl]="dateFrom", and it pointed me to the mat-datepicker element.