Angular2 Wenn ngModel in einem Formular-Tag verwendet wird, muss entweder das Attribut name oder das Formular festgelegt werden

Ich erhalte diesen Fehler von Angular 2

core.umd.js: 5995 AUSNAHME: Nicht erfasst (versprochen): Fehler: Fehler in app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 verursacht durch: Wenn ngModel in einem Formular-Tag verwendet wird, muss entweder das Namensattribut sein set oder das Formularsteuerelement muss in ngModelOptions als 'Standalone' definiert sein.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
<td *ngFor="let lag of ce.lags">
    <div class="form-group1">
        <input name="name" [(ngModel)]="lag.name" [ngModelOptions]="{standalone: true}"  class="form-control" pattern="[0-9]*(\.[0-9]+)?" required>
    </div>

</td>

So verwende ich das Formular-Tag:

 <form #f="ngForm" (ngSubmit)="onSubmit()">

Wenn ngForm verwendet wird, werden alle Eingabefelder , die hat [(ngModel)]=""ein Attribut muss Namen mit einem Wert.

<input [(ngModel)]="firstname" name="something">

Da jeder Entwickler die Gewohnheit hat, nicht den vollständigen Fehler zu lesen, lesen Sie einfach die erste Zeile und suchen Sie nach einer Antwort von jemand anderem :) :) Ich bin auch einer von ihnen, deshalb bin ich hier:

Lesen Sie den Fehler und sagen Sie deutlich:

Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

Was brauchen wir mehr, um diesen Fehler zu verstehen?

Verwenden Sie eine Option, alles funktioniert reibungslos.

Beide Attribute werden benötigt und überprüfen Sie erneut, ob alle Formularelemente das Attribut "Name" haben. Wenn Sie das Formular zum Senden von Formularen verwenden, verwenden Sie andernfalls einfach das div-Tag anstelle des Formularelements.

<input [(ngModel)]="firstname" name="something">

In meinem Fall passierte der Fehler , weil unten in HTML - Markup eine weitere Zeile ohne existierte Name - Attribut.

<form id="form1" name="form1" #form="ngForm">
  <div class="form-group">
    <input id="input1" name="input1" [(ngModel)]="metaScript" />
    ... 
    <input id="input2" [(ngModel)]="metaScriptMessage"/>
  </div>
</form>

Der Browser meldet jedoch weiterhin, dass in der ersten Zeile der Fehler aufgetreten ist. Und es ist schwierig, die Fehlerquelle zu entdecken, wenn Sie andere Elemente zwischen diesen beiden haben.

Wenn Sie sich die Konsole genau ansehen, erhalten Sie zwei Beispiele. Implementieren Sie eines dieser Beispiele.

<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone:
   true}">

oder <input [(ngModel)]="person.firstName" name="first">

Mir ist aufgefallen, dass das Chrome-Entwicklertool manchmal nur das erste Element in rotem Rot unterstreicht, selbst wenn es korrekt mit einem Namen eingerichtet ist. Das warf mich für eine Weile ab.

Man muss sicher sein , einen hinzuzufügen Namen zu jedem Elemente auf dem Formular , das ngModel enthält , unabhängig von denen ein verschnörkelten unterstrichen.

Es ist ziemlich einfach für eine Lösung.

Für mich hatten wir mehr als eine Eingabe im Formular. Wir müssen die Eingabe / Zeile, die den Fehler verursacht, isolieren und einfach das nameAttribut hinzufügen . Das hat das Problem für mich behoben:

Vor:

<form class="example-form">

    <mat-form-field appearance="outline">

      <mat-select placeholder="Select your option" [(ngModel)]="sample.stat"> <!--HERE -->

          <mat-option *ngFor="let option of actions" [value]="option">{{option}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Enter number</mat-label>

      <input id="myInput" type="text" placeholder="Enter number" aria-label="Number"
        matInput [formControl]="myFormControl" required [(ngModel)]="number">  <!--HERE -->

    </mat-form-field>

    <mat-checkbox [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE -->

  </form>

Nachher: Ich habe gerade das nameAttribut für selectund hinzugefügt checkboxund das Problem wurde behoben. Wie folgt:

<mat-select placeholder="Select your option" name="mySelect" 
  [(ngModel)]="sample.stat"> <!--HERE: Observe the "name" attribute -->

<input id="myInput" type="text" placeholder="Enter number" aria-label="Number"
        matInput [formControl]="myFormControl" required [(ngModel)]="number">  <!--HERE -->

<mat-checkbox name="myCheck" [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE: Observe the "name" attribute -->

Wie Sie sehen, wurde das nameAttribut hinzugefügt . Es ist nicht erforderlich, dass Sie Ihren ngModelNamen angeben . Nur die Angabe des nameAttributs behebt das Problem.

Sie müssen {NgForm} aus @ angle / forms in Ihre page.ts importieren.

Code HTML:

<form #values="ngForm" (ngSubmit)="function(values)">
 ...
 <ion-input type="text" name="name" ngModel></ion-input>
 <ion-input type="text" name="mail" ngModel></ion-input>
 ...
</form>

Implementieren Sie in Ihren Page.ts Ihre Funktion zum Bearbeiten von Formulardaten:

function(data) {console.log("Name: "data.value.name + " Mail: " + data.value.mail);}

Versuche dies...

    <input type="text" class="form-control" name="name" placeholder="Name"
                  required minlength="4" #name="ngModel"
                  ngModel>
                  <div *ngIf="name.errors && (name.dirty || name.touched)">
                      <div [hidden]="!name.errors.required" class="alert alert-danger form-alert">
                          Please enter a name.
                      </div>
                      <div [hidden]="!name.errors.minlength" class="alert alert-danger form-alert">
                          Enter name greater than 4 characters.
                      </div>
                  </div>

Für alle, die nicht mit der Fehlermeldung selbst in Panik geraten, sondern nur nach der Erklärung suchen, warum das Beispiel von hier nicht funktioniert (dh eine dynamische Filterung findet nicht statt, wenn der Text in das Eingabefeld eingegeben wird): Es funktioniert nicht bis Sie den Parameter name in das Eingabefeld einfügen. Nichts deutet auf die Erklärung hin, warum Pipe nicht funktioniert, aber die Fehlermeldung verweist auf dieses Thema. Wenn Sie es gemäß der akzeptierten Antwort korrigieren, funktioniert der dynamische Filter.

Sie haben die von Ihnen verwendete Version nicht erwähnt, aber wenn Sie rc5 oder rc6 verwenden, ist dieser "alte" Formstil veraltet. Hier finden Sie Anleitungen zu den "neuen" Formulartechniken: https://angular.io/docs/ts/latest/guide/forms.html

Um die Informationen in dem gewünschten Formular anzeigen zu können, müssen Sie diese spezifischen Eingaben von Interessennamen angeben. Ich würde empfehlen, dass Sie haben:

<form #f="ngForm" (ngSubmit)="onSubmit(f)"> ...
<input **name="firstName" ngModel** placeholder="Enter your first name"> ...

Für mich war die Lösung sehr einfach. Ich habe das <form>Tag in a geändert <div>und der Fehler verschwindet.

<select name="country" formControlName="country" id="country" 
       class="formcontrol form-control-element" [(ngModel)]="country">
   <option value="90">Turkey</option>
   <option value="1">USA</option>
   <option value="30">Greece</option>
</select>

name="country"
formControlName="country" 
[(ngModel)]="country" 

Dies sind die drei Dinge, die benötigt werden, um ngModel in einer formGroup-Direktive zu verwenden.

Beachten Sie, dass der gleiche Name verwendet werden sollte.