web-dev-qa-db-ja.com

「control.registerOnChangeは関数ではありません」エラーの原因

リアクティブフォームアプローチを使用したフォームがあります。フォームは私のパグで次のように作成されます：

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

Javascript部分のフォーム（FormArray）を変更しようとする場合を除き、すべて正常に動作します。次のエラーが表示されます。

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)

フォームを変更するための私のコードは非常に複雑であり、それを単純化したり、プランカーで再現することはできません。解決策を直接見つけるよりも（詳細があまりにも難しいので）、このエラーの意味を理解したいと思いますか？このエラーの原因は何ですか。

HTMLの[formGroup]='form'でエラーが発生することがわかりました。

任意の提案が役立ちます。

Updateangular github here に問題を提出し、修正を提案しました- here 問題を再現するためのプランカーは here

formsangular
25
ncohen

はい、そのエラーメッセージは少しわかりにくいですが、FormBuilderを使用すると、コンポーネントのFormGroupにコントロールを追加して名前を付けたときに表示されます "A"が、formControlName = "A"で入力を追加するのを忘れたテンプレートに、またはformControlNameが意図した入力ではない[〜＃〜] a [〜＃〜] 、空、または存在しない。

基本的に、「FormGroupにあるコントロールをテンプレート内のコントロールに一致させることはできません」とあります。

33
Anton Nikiforov

私は同様の問題の解決策を探していて、自分で解決策を見つけました。私の問題は次のとおりでした。このような形がありました

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

最初は、テンプレートの各ステータスのチェックボックスのリストで表されていました。そして、statusセレクターを表すカスタムコンポーネントを作成し、そのようにテンプレートで使用しました

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

問題は、formControlNameがFormControlインスタンスを指している必要があるが、実際にはFormArrayインスタンスを指していたということです。したがって、status: new FormControl([])に変更すると、この問題が修正されました。

27
Vladimir Prudnikov

また、テンプレート駆動型とリアクティブ駆動型アプローチを組み合わせたときに（誤って）このエラーが発生しました。

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

inputCtrlがコンポーネントで適切に定義されました。もちろん、 #inputCtrlは、機能するために廃棄する必要があります（入力に約10個の属性が含まれていることを確認するのは困難でした）。

5
Alexei

たぶん、テンプレート内のグループの外側にコントロール要素を移動したかもしれません。

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>
1
Nicolas Zozol

フォームでFormArrayフィールドを定義している場合は、formControlName = ""でラベル付けする必要がないことに注意してください。入力と検証を他の方法（セッター、ゲッター、関数）で処理する必要がありますが、formControlNameをFormArrayに割り当てようとすると間違いなくエラーが発生します！

0
Jack O'Brien

このエラーは、ng-templateとともに*ngIf内でリアクティブフォームを使用した場合にも表示されます。

これを回避するには、ng-containerを使用し、ngElseを使用しないでください。

0
Ashutosh Pandey