web-dev-qa-db-fra.com

La cause de l'erreur "control.registerOnChange n'est pas une fonction"

J'ai un formulaire utilisant l'approche de formulaire réactif. Le formulaire est créé comme suit dans mon carlin:

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

Tout fonctionne bien sauf lorsque j'essaie de changer le formulaire (qui est une FormArray) dans la partie javascript. Je reçois l'erreur suivante:

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)

Mon code pour changer le formulaire est assez complexe et je ne peux pas le simplifier ni le reproduire dans un plunker. Plus que de trouver directement la solution (c'est trop difficile avec si peu de détails), j'aimerais comprendre ce que cette erreur signifie? Et qu'est-ce qui pourrait causer cette erreur?.

J'ai compris que l'erreur se produit à [formGroup]='form' dans mon code HTML.

Toute suggestion aidera.

Mise à jour J'ai déposé un problème sur github angulaire ici et ai proposé un correctif ici Le plunker permettant de reproduire le problème est ici

formsangular
15
ncohen

Oui, ce message d'erreur est un peu cryptique, mais si vous utilisez FormBuilder , vous verrez ceci lorsque vous ajoutez un contrôle à FormGroup dans votre composant et le nomme "A", mais soit vous avez oublié d’ajouter une entrée avec formControlName = "A" à votre modèle, soit formControlName car l’entrée prévue n’est pas A, ni vide, ni présent. 

En gros, il est écrit: "Je ne peux pas faire correspondre le contrôle que j'ai dans FormGroup au contrôle du modèle".

25
Anton Nikiforov

Je suis tombé sur la recherche d'une solution au problème similaire, puis j'ai trouvé une solution moi-même. Mon problème était le suivant. J'ai eu un formulaire comme celui-ci

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

Initialement, il était représenté par la liste des cases à cocher pour chaque statut sur le modèle. Et puis j'ai créé un composant personnalisé pour représenter le sélecteur status et je l'ai utilisé dans un modèle comme si

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

Le problème est que formControlName doit pointer sur FormControl instance, mais en réalité, il pointait sur une instance FormArray. Donc, passer à status: new FormControl([]) a résolu ce problème pour moi.

14
Vladimir Prudnikov

J'ai également rencontré cette erreur lors de l'utilisation de modèles mixtes avec des approches réactives (par erreur):

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

inputCtrl a été correctement défini dans le composant. Bien sûr, #inputCtrl doit être abandonné pour fonctionner (il était difficile de voir quand l'entrée avait environ 10 attributs).

2
Alexei

Vous avez peut-être déplacé un élément de contrôle en dehors du groupe dans le modèle.

D'ACCORD:

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

Pas d'accord: 

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