Nach dem Upgrade auf RC5 wurde der folgende Fehler angezeigt:
ngModel cannot be used to register form controls with a parent formGroup
directive.
Try using formGroup's partner directive "formControlName" instead. Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
Or, if you'd like to avoid registering this form control,
indicate that it's standalone in ngModelOptions:
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
<input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>
Es sieht so aus, als könnten die beiden in RC5 nicht mehr zusammen verwendet werden, aber ich konnte keine alternative Lösung finden.
Hier ist die Komponente, die die Ausnahme erzeugt:
<select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
<option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
</select>
angular
angular2-forms
angular2-formbuilder
user2363245
quelle
quelle
FormsModule
und importiertReactiveFormsModule
?Antworten:
Die Antwort befindet sich direkt in der Fehlermeldung. Sie müssen angeben, dass sie eigenständig ist und daher nicht mit den Formularsteuerelementen in Konflikt steht:
quelle
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.
https://next.angular.io/api/forms/FormControlName#use-with-ngmodelErweiterung der Antwort von @Avenir Çokaj
Als Anfänger habe ich die Fehlermeldung zunächst nicht klar verstanden.
Die Fehlermeldung zeigt an, dass Sie in Ihrer formGroup ein Element haben, das in Ihrem formControl nicht berücksichtigt wird. (Absichtlich / versehentlich)
Wenn Sie dieses Feld nicht validieren möchten, aber dennoch das ngModel für dieses Eingabeelement verwenden möchten, fügen Sie das Flag hinzu, um anzuzeigen, dass es sich um eine eigenständige Komponente handelt, ohne dass eine Validierung erforderlich ist, wie oben von @Avenir erwähnt.
quelle
OK, endlich hat es funktioniert: siehe https://github.com/angular/angular/pull/10314#issuecomment-242218563
Kurz gesagt, Sie können das
name
Attribut innerhalb von a nicht mehr verwendenformGroup
und müssen esformControlName
stattdessen verwendenquelle
Wenn Sie formcontrolname Angular 2 schreiben, akzeptieren Sie nicht. Sie müssen formControlName schreiben . Es geht um zweite Großbuchstaben.
Wenn der Fehler weiterhin besteht, versuchen Sie, die Formularsteuerung für das gesamte Objektfeld (myObject) festzulegen.
zwischen dem Start
<form> </form>
zum Beispiel:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.
quelle
import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms'; this.userInfoForm = new FormGroup({ userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])), userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])), userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required])) });
<form [formGroup]="userInfoForm" class="form-horizontal"> <div class="form-group"> <label class="control-label"><i>*</i> User Name</label> <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName"> </div> <div class="form-group"> <label class="control-label"><i>*</i> Name</label> <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name"> </div> <div class="form-group"> <label class="control-label"><i>*</i> Surname</label> <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName"> </div> </form>
quelle
Ich musste wissen, warum dies in einer bestimmten Komponente und nicht in einer anderen Komponente geschah.
Das Problem war, dass ich 2 Formulare in einer Komponente hatte und das zweite Formular noch nicht hatte
[formGroup]
und noch nicht registriert war, da ich die Formulare noch erstellte.Ich habe beide Formulare vollständig geschrieben, ohne dass eine Eingabe registriert wurde, die das Problem löst.
quelle
Ich habe gerade diesen Fehler erhalten, weil ich nicht alle meine Formularsteuerelemente in a
div
mit einemformGroup
Attribut eingeschlossen habe.Dies löst beispielsweise einen Fehler aus
Dies kann leicht übersehen werden, wenn es sich um eine besonders lange Form handelt.
quelle
Wenn Sie verwenden möchten ,
[formGroup]
mitformControlName
, müssen Sie ersetzenname
Attribut mitformControlNameformControlName
.Beispiel:
Dies funktioniert nicht, da das Attribut
[formGroup]
und verwendetname
wird.Sie sollten das
name
Attribut durch ersetzenformControlName
und es funktioniert wie folgt:quelle
Es sieht so aus, als würden Sie ngModel im selben Formularfeld wie formControlName verwenden. Die Unterstützung für die Verwendung der Eingabeeigenschaft ngModel und des Ereignisses ngModelChange mit Anweisungen für reaktive Formulare ist in Angular v6 veraltet und wird in Angular v7 entfernt
quelle
Dieser Fehler tritt auf, wenn Ihre Formulargruppen-Tags einige Formularsteuerelemente (wie Eingaben, Auswahl usw.) ohne die Eigenschaft formControlName enthalten.
Diese Beispiele werfen den Fehler:
Es gibt zwei Möglichkeiten, die für sich allein stehen:
Oder in die Formulargruppe aufnehmen
Der letzte impliziert, sie in der InitialisierungsformGroup zu definieren
quelle