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

88

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>
user2363245
quelle
Hast du FormsModuleund importiert ReactiveFormsModule?
Günter Zöchbauer
Sicher, beide
user2363245
AFAIK, die einzige existierende Erklärung ist die folgende: blog.angular-university.io/…
user2363245
Gefundene Quelle der Änderung: github.com/angular/angular/pull/10314
user2363245

Antworten:

167

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}"
Avenir Çokaj
quelle
1
Was bedeutet Standalone?
Jas
2
Dies bedeutet, dass es nicht vom Formularmodell / den Daten verarbeitet wird, sodass Sie Daten von jedem gewünschten Objekt / Modell übergeben können, wie es früher in AngularJS 1
Avenir Çokaj
Ich sehe dieses Problem nur in meinem Testaufbau. Was fehlt genau? [ngModelOptions] = "{standalone: ​​true}" behebt den Test, ändert jedoch die Logik. ngModel wird von der übergeordneten Komponente geerbt, die in meinem Fall
ngForm
2
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-ngmodel
WasiF
27

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.

saNiks
quelle
6
Was ist, wenn Sie es zur Validierung verwenden UND gleichzeitig mit ngModel verwenden möchten?
Paul
In meinem Fall habe ich es versäumt, formControl für ein Element in formGroup zu deklarieren!
Sagar Khatri
8

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

ethemsulan
quelle
5

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>

barış çıracı
quelle
1

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.

GoalsAndGambles
quelle
1

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.

Stephen Paul
quelle
1

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>
SANA Abdoul Aziz
quelle
Eine Lösung hierfür könnte auch sein, wenn Sie eine [formGroup] = "myGroup" verwenden und intern mit [(ngModel)] auf eine Eigenschaft verweisen, die in der formGroup nicht vorhanden ist. Versuchen Sie, [ngModelOptions] = "{standalone: ​​true}" hinzuzufügen, damit Sie Ihrem Compiler mitteilen, dass es möglicherweise ausgeschlossen ist und es sich um eine eigenständige Eigenschaft handelt
ProblemAnswerQue
0

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

Qodir Amirov
quelle
0

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('')
});
Meztli
quelle