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

216

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()">
Tampa
źródło
2
cosider przyznając jedną z poprawnych odpowiedzi
G. Stoynev

Odpowiedzi:

420

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">
Thyagarajan C.
źródło
1
wyszukaj „atrybut nazwy” w tym angular.io/docs/ts/latest/api/forms/index/…
Thyagarajan C
1
czy atrybut name musi mieć unikalną wartość?
Alexander Mills,
2
Z dokumentacji Angulara 5 ( angular.io/guide/forms ): „Zdefiniowanie atrybutu nazwy jest wymagane przy użyciu [(ngModel)] w połączeniu z formularzem.”
elshev
2
Dotyczy również Angulara 7!
coderpc
2
Chciałbym dodać, że będzie działać tylko wtedy, gdy ngModel pojawi się na pierwszym miejscu przed nazwą.
Ronald Abellano
55

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.

Ali Adravi
źródło
25
Przydatne byłoby wyjaśnienie implikacji / efektu każdej alternatywy - arbitralne wybranie jednej z dwóch nie wydaje się dobrym pomysłem.
Michael
2
kocham cię :)))))
Lola
1
Oto dobre wytłumaczenie dla [ngModelOptions]="{standalone: true}: stackoverflow.com/a/38368261/3135317 . W moim przypadku mam przerażające, że `ngModel jest używany w znaczniku formularza, albo atrybut name musi ...` błąd, gdy miałem `* ngFor * dla zagnieżdżonej tablicy. Wiązanie modelu było w porządku, szablon wygięty. „Przykład 1” NIE MOGŁO działać; „Przykład 2” był idealny.
FoggyDay
Ta odpowiedź pomogła mi dwa razy w tym samym tygodniu (najwidoczniej nie przykleiła się za pierwszym razem);)
Jay Cummins
30

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">
Vinayak Shedgeri
źródło
30

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. wprowadź opis zdjęcia tutaj

elshev
źródło
16

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

RAHUL KUMAR
źródło
16

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.

Eric
źródło
9

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.

Kailas
źródło
3

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);}
João Paulo Paiva
źródło
3

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>
Sai Kryszna
źródło
3

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.

Ilya Jewlampiew
źródło
2

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"> ...
thnkr22
źródło
2

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

John Henckel
źródło
1
Wynika to z faktu, że usuwasz formularz, a tym samym usuwasz wszystkie funkcje oferowane przez formularz.
astro8891
@ astro8891 me no need feature
John Henckel
0
<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.

Akitha_MJ
źródło