是什么导致"control.registerOnChange不是函数"错误

Question

我有一个使用反应形式方法的表格.表单在我的哈巴狗中创建如下:

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

一切正常,除非我尝试FormArray在javascript部分中更改表单(即a ).我收到以下错误:

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)

我改变表单的代码非常复杂,我不能简化它或在plunker中重现它.不仅仅是直接找到解决方案(由于细节太少而太难),我想了解这个错误意味着什么？什么可能导致这个错误.

我已经发现错误发生[formGroup]='form'在我的HTML中.

任何建议都会有所帮助.

更新我已经在GitHub上的角度提交的问题,在这里并提出修复这里重现该问题的plunker是这里

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

在我的情况下，抛出此错误是因为我使用FormControlName而不是FormArrayName绑定到FormArray我的模板中的 a 。

我的组件代码：

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

我抛出错误的模板代码：

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

使固定：

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

Answer 4

在我的情况下，当 formControl 名称与页面上的模板变量相同时发生错误。例如

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

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

Answer 5

当将模板驱动与反应驱动方法混合时（错误），我也遇到了此错误：

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

inputCtrl已在组件中正确定义。当然，#inputCtrl必须将其废弃才能工作（很难看到输入何时具有约10个属性）。

Answer 6

this.extensionForm = this._fb.group({
      id: [''],
      category: [12],
      extensions: new FormArray([]),
      priority: ['', []],
    });
    formArray.push(this.extensionForm);

注意：- 发生错误是因为您在声明 formArray 的地方使用了 formControlName，您必须改用 formArrayName

<input type="text" formControlName="extensions" />

simple solution: 

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