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(form.value, form.valid)') 

Everything works fine except when I try to change the form (which is a FormArray) in the javascript part. I get the following error:

EXCEPTION: Error in http://localhost:8080/app/components/fillForm.template.html:0:326 caused by: control.registerOnChange is not a function core.umd.js:3497 TypeError: control.registerOnChange is not a function     at setUpControl (http://localhost:8080/node_modules/@angular/forms/bundles/forms.umd.js:1634:17)     at eval (http://localhost:8080/node_modules/@angular/forms/bundles/forms.umd.js:4752:25)     at Array.forEach (native)     at FormGroupDirective._updateDomValue (http://localhost:8080/node_modules/@angular/forms/bundles/forms.umd.js:4747:29)     at FormGroupDirective.ngOnChanges (http://localhost:8080/node_modules/@angular/forms/bundles/forms.umd.js:4616:22)     at Wrapper_FormGroupDirective.ngDoCheck (/ReactiveFormsModule/FormGroupDirective/wrapper.ngfactory.js:30:18)     at View_FillFormComponent2.detectChangesInternal (/AppModule/FillFormComponent/component.ngfactory.js:275:32)     at View_FillFormComponent2.AppView.detectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12592:18)     at View_FillFormComponent2.DebugAppView.detectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12739:48)     at ViewContainer.detectChangesInNestedViews (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12850:41)     at CompiledTemplate.proxyViewClass.View_FillFormComponent0.detectChangesInternal (/AppModule/FillFormComponent/component.ngfactory.js:64:14)     at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12592:18)     at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12739:48)     at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js:12577:22)     at CompiledTemplate.proxyViewClass.View_FillFormComponent_Host0.detectChangesInternal (/AppModule/FillFormComponent/host.ngfactory.js:29:19) 

My code to change the form is quite complex and I can't simplify it or reproduce it in a plunker. More than finding directly the solution (it's too difficult with so little details), I would like to understand what this error means? And what might cause this error.

I have figured out that the error occurs at [formGroup]='form' in my HTML.

Any suggestion will help.

Update I have filed an issue on angular github here and have proposed a fix here The plunker to reproduce the issue is here

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

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.