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

Question

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

form([formGroup]='form', novalidate='', (ngSubmit)='postSurvey(form.value, form.valid)')

Everything works well, except when I try to change the form (which is 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 for changing the form is quite complicated, and I cannot simplify it or play it in the plunger. More than finding a direct solution (this is too complicated with so few details), I would like to understand what this error means? And what can cause this error.

I realized that the error is happening in [formGroup]='form'in my HTML.

Any suggestion will help.

github ,

Answer 1

, , FormBuilder, , FormGroup "A", formControlName = "A" , formControlName A, .

, : " , FormGroup, ".

Answer 2

, . .

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

. status

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

, formControlName FormControl, FormArray. , status: new FormControl([]) .

Answer 3

( ):

<input #inputCtrl
       [formControl]="inputCtrl"
/>

inputCtrl . , #inputCtrl #inputCtrl ( , 10 ).

Answer 4

, .

OK:

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

:

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

Answer 5

, ng-template *ngIf.

, ng-container ngElse.

Answer 6

If you have defined a FormArray field in your form, note that you DO NOT need to mark it with formControlName = "". You need to handle input and validation in other ways (setters, getters, functions), but you will definitely get an error if you try to assign formControlName to FormArray!