Angular2 Jeśli ngModel jest używany w znaczniku formularza, należy ustawić atrybut name lub formularz

Otrzymuję ten błąd z Angulara 2

core.umd.js: 5995 WYJĄTEK: Nieprzechwycony (w obietnicy): Błąd: Błąd w app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 spowodowany przez: Jeśli ngModel jest używany w tagu formularza, albo atrybut name musi być zestaw lub formant formularza musi być zdefiniowany jako „samodzielny” w ngModelOptions.

      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>

Oto jak używam tagu formularza:

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

Jeśli używany jest ngForm, wszystkie pola wejściowe, które mają, [(ngModel)]=""muszą mieć nazwę atrybutu z wartością.

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

Ponieważ każdy programista ma wspólny nawyk, aby nie czytać pełnego błędu, po prostu przeczytaj pierwszą linię i zacznij szukać odpowiedzi od kogoś innego :) :) Jestem również jednym z nich, dlatego jestem tutaj:

Przeczytaj błąd, wyraźnie mówiąc:

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

Czego więcej potrzebujemy, aby zrozumieć ten błąd?

Użyj dowolnej opcji, wszystko będzie działać płynnie.

Oba atrybuty są potrzebne, a także ponownie sprawdź, czy wszystkie elementy formularza mają atrybut „nazwa”. jeśli używasz formularza przesłania formularza, w innym przypadku po prostu użyj tagu div zamiast elementu formularza.

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

W moim przypadku wystąpił błąd, ponieważ poniżej w znacznikach HTML istniała jeszcze jedna linia bez atrybutu name .

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

Ale przeglądarka nadal zgłasza błąd w pierwszym wierszu. I trudno jest znaleźć źródło błędu, jeśli między tymi dwoma elementami są inne elementy.

Gdy wyraźnie spojrzysz na konsolę, podam dwa przykłady. Zaimplementuj dowolny z nich.

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

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

Zauważyłem, że narzędzie dla programistów Chrome czasami tylko podkreśla pierwszy element na czerwono, nawet jeśli jest poprawnie skonfigurowane z nazwą. To mnie na chwilę rzuciło.

Należy dodać nazwę do każdego elementu w formularzu zawierającym ngModel, niezależnie od tego, który z nich jest lekko podkreślony.

Naprawdę łatwo to naprawić.

Dla mnie mieliśmy więcej niż jeden wkład w formularzu. Musimy odizolować wejście / linię powodującą błąd i po prostu dodać nameatrybut. To rozwiązało problem:

Przed:

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

Po: Ja po prostu dodaje nameatrybut dla selecta checkboxi usunąć problem. Następująco:

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

Jak widać dodano nameatrybut. Nie trzeba podawać tego samego ngModelimienia i nazwiska. Podanie nameatrybutu naprawi problem.

Musisz zaimportować {NgForm} z @ angular / form na page.ts;

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

W pliku Page.ts zaimplementuj funkcję, aby manipulować danymi formularza:

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

Spróbuj tego...

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

Dla każdego, kto nie należy wpadać w panikę z samym komunikatem o błędzie, ale tylko googlowania dla wyjaśnienia dlaczego przykład ze tutaj nie działa (czyli dynamiczne filtrowanie nie występuje, gdy tekst jest wpisany w polu wejściowym): to nie zadziała dopóki nie dodasz parametru name w polu wejściowym. Nic nie wskazuje na wyjaśnienie, dlaczego potok nie działa, ale komunikat o błędzie wskazuje ten temat i poprawienie go zgodnie z przyjętą odpowiedzią powoduje, że filtr dynamiczny działa.

Nie wspomniałeś o używanej wersji, ale jeśli używasz rc5 lub rc6, ten „stary” styl formy został uznany za przestarzały. Spójrz na to, aby uzyskać wskazówki na temat technik „nowych” formularzy: https://angular.io/docs/ts/latest/guide/forms.html

Aby móc wyświetlić informacje w żądanym formularzu, musisz podać te konkretne dane wejściowe nazw zainteresowań. Polecam mieć:

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

Dla mnie rozwiązanie było bardzo proste. Zmieniłem <form>tag na a <div>i błąd zniknął.

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

Są to trzy rzeczy, których należy użyć ngModel w dyrektywie formGroup.

Pamiętaj, że należy użyć tej samej nazwy.