ngModel kann nicht zum Registrieren von Formularsteuerelementen bei einer übergeordneten formGroup-Direktive verwendet werden

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>

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:

[ngModelOptions]="{standalone: true}"

Erweiterung 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.

OK, endlich hat es funktioniert: siehe https://github.com/angular/angular/pull/10314#issuecomment-242218563

Kurz gesagt, Sie können das nameAttribut innerhalb von a nicht mehr verwenden formGroupund müssen es formControlNamestattdessen verwenden

Wenn Sie formcontrolname Angular 2 schreiben, akzeptieren Sie nicht. Sie müssen formControlName schreiben . Es geht um zweite Großbuchstaben.

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

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>.

Wenn die Komponente mehr als ein Formular hat, registrieren Sie alle Steuerelemente und Formulare

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.

Ich habe gerade diesen Fehler erhalten, weil ich nicht alle meine Formularsteuerelemente in a divmit einem formGroupAttribut eingeschlossen habe.

Dies löst beispielsweise einen Fehler aus

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

Dies kann leicht übersehen werden, wenn es sich um eine besonders lange Form handelt.

Wenn Sie verwenden möchten , [formGroup]mit formControlName, müssen Sie ersetzen nameAttribut mit formControlNameformControlName.

Beispiel:

Dies funktioniert nicht, da das Attribut [formGroup]und verwendet namewird.

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

Sie sollten das nameAttribut durch ersetzen formControlNameund es funktioniert wie folgt:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

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

Dieser Fehler tritt auf, wenn Ihre Formulargruppen-Tags einige Formularsteuerelemente (wie Eingaben, Auswahl usw.) ohne die Eigenschaft formControlName enthalten.

Diese Beispiele werfen den Fehler:

<form [formGroup]="myform">
    <input type="text">
    <input type="text" [ngmodel]="nameProperty">
    <input type="text" [formGroup]="myform" [name]="name">
</fom>

Es gibt zwei Möglichkeiten, die für sich allein stehen:

<form [formGroup]="myform">
    <input type="text" [ngModelOptions]="{standalone: true}">
    <input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
    <!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

Oder in die Formulargruppe aufnehmen

<form [formGroup]="myform">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="nameProperty">
    <input type="text" formControlName="name">
</fom>

Der letzte impliziert, sie in der InitialisierungsformGroup zu definieren

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});