webentwicklung-frage-antwort-db.com.de

Was verursacht den Fehler "control.registerOnChange ist keine Funktion"?

Ich habe eine Form, die den Ansatz der reaktiven Form verwendet. Das Formular wird wie folgt in meinem Mops erstellt:

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

Alles funktioniert gut, außer wenn ich versuche, das Formular (das eine FormArray ist) im Javascript-Teil zu ändern. Ich erhalte folgende Fehlermeldung:

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)

Mein Code zum Ändern des Formulars ist ziemlich komplex und kann nicht vereinfacht oder in einem Plunker reproduziert werden. Mehr als direkt die Lösung zu finden (es ist zu schwierig mit so kleinen Details), würde ich gerne verstehen, was dieser Fehler bedeutet. Und was könnte diesen Fehler verursachen?.

Ich habe herausgefunden, dass der Fehler bei [formGroup]='form' in meinem HTML-Code auftritt.

Jeder Vorschlag wird helfen.

Update Ich habe eine Ausgabe zu Winkelgithub hier eingereicht und einen Fix hier vorgeschlagen - Der Plunker, der das Problem reproduziert, ist hier

formsangular
15
ncohen

Ja, diese Fehlermeldung ist etwas kryptisch, aber wenn Sie FormBuilder verwenden, wird dies angezeigt, wenn Sie ein Steuerelement zu FormGroup in Ihrer Komponente hinzugefügt und es mit "A" bezeichnet haben Sie haben dann entweder vergessen, die Eingabe mit formControlName = "A" zu Ihrer Vorlage hinzuzufügen, oder formControlName für die beabsichtigte Eingabe ist nicht A oder leer oder nicht vorhanden. 

Grundsätzlich heißt es: "Ich kann das Steuerelement, das ich in FormGroup habe, nicht mit dem Steuerelement in der Vorlage abgleichen".

25
Anton Nikiforov

Ich bin auf der Suche nach einer Lösung für das ähnliche Problem gestoßen und habe dann selbst eine Lösung gefunden. Mein Problem war das Folgende. Ich hatte eine Form wie diese

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

Anfangs wurde es durch die Liste der Kontrollkästchen für jeden Status in der Vorlage dargestellt. Und dann habe ich eine benutzerdefinierte Komponente erstellt, um status-Selektor darzustellen, und habe sie in der Vorlage verwendet

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

Das Problem ist, dass formControlName auf FormControl-Instanz zeigen muss, tatsächlich jedoch auf eine FormArray-Instanz. Durch die Umstellung auf status: new FormControl([]) wurde dieses Problem für mich behoben.

14
Vladimir Prudnikov

Dieser Fehler ist auch aufgetreten, wenn gemischte Schablonen (aus Versehen) mit reaktiven Antrieben angesteuert wurden:

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

inputCtrl wurde in der Komponente ordnungsgemäß definiert. Natürlich muss #inputCtrl ausrangiert werden, um zu funktionieren (es war schwer zu sehen, wenn die Eingabe etwa 10 Attribute hatte).

2
Alexei

Möglicherweise haben Sie ein Steuerelement außerhalb der Gruppe in der Vorlage verschoben.

OK:

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

Nicht ok: 

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

Wenn Sie in Ihrem Formular ein FormArray-Feld definiert haben, müssen Sie es NICHT mit formControlName = "" kennzeichnen. Sie müssen die Eingabe und Validierung auf andere Weise (Setter, Getter, Funktionen) handhaben, erhalten jedoch definitiv eine Fehlermeldung, wenn Sie versuchen, formControlName einem FormArray zuzuweisen!

0
Jack O'Brien

Dieser Fehler tritt auch auf, wenn wir ein reaktives Formular in ng-template Zusammen mit *ngIf Verwenden.

Um dies zu vermeiden, verwenden Sie ng-container Und nicht ngElse.

0
Ashutosh Pandey