Angular2 Если в теге формы используется ngModel, должен быть задан атрибут name или форма

Я получаю эту ошибку от Angular 2

core.umd.js: 5995 ИСКЛЮЧЕНИЕ: Uncaught (в обещании): ошибка: ошибка в app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18, вызванная: если в теге формы используется ngModel, либо атрибут name должен быть set или элемент управления формы должен быть определен как «автономный» в 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>

Вот как я использую тег формы:

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

Если используется ngForm, все поля ввода [(ngModel)]=""должны иметь имя атрибута со значением.

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

Поскольку у каждого разработчика есть общая привычка, не читать полную ошибку, просто прочитайте первую строку и начните искать ответ от кого-то еще :) :) Я тоже один из них, поэтому я здесь:

Прочитайте ошибку, четко сказав:

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

Что еще нам нужно, чтобы понять эту ошибку?

Используйте любой вариант, все будет работать гладко.

В моем случае ошибка произошла потому, что ниже в html разметке существовала еще одна строка без атрибута 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>

Но браузер все еще сообщает, что в первой строке есть ошибка. И трудно обнаружить источник ошибки, если между ними есть другие элементы.

Оба атрибута необходимы, а также перепроверить все элементы формы, имеющие атрибут «имя». Если вы используете концепцию отправки формы, в противном случае просто используйте тег div вместо элемента формы.

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

Когда вы четко посмотрите на консоль. Это даст вам два примера. Реализуйте любой из них.

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

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

Я заметил, что инструмент разработчика Chrome иногда только подчеркивает первый элемент красным, даже если он правильно задан с именем. Это оттолкнуло меня на некоторое время.

Необходимо обязательно добавить имя к каждому элементу формы, который содержит ngModel, независимо от того, какой из них подчеркнут.

Это довольно легко исправить.

Для меня у нас было более одного ввода в форме. Нам нужно изолировать ввод / строку, вызывающую ошибку, и просто добавить nameатрибут. Это решило проблему для меня:

Перед:

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

После: я просто добавил nameатрибут для selectи checkboxи это решило проблему. Следующим образом:

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

Как видите, добавил nameатрибут. Не обязательно указывать то же самое, что и ваше ngModelимя. Просто предоставление nameатрибута решит проблему.

Вам нужно импортировать {NgForm} из @ angular / forms в вашем page.ts;

Код 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>

В вашем Page.ts реализуйте свою функцию для манипулирования данными формы:

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

Попробуй это...

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

Для всех, кто не паникует из-за самого сообщения об ошибке, а просто гуглится для объяснения, почему пример отсюда не работает (т.е. динамическая фильтрация не происходит, когда текст вводится в поле ввода): он не будет работать пока вы не добавите параметр name в поле ввода. Ничто не указывает на объяснение, почему канал не работает, но сообщение об ошибке указывает на эту тему, и исправление его в соответствии с принятым ответом делает динамический фильтр работающим.

Вы не упомянули версию, которую используете, но если вы используете rc5 или rc6, этот «старый» стиль формы устарел. Посмотрите на это для руководства по «новым» методам форм: https://angular.io/docs/ts/latest/guide/forms.html

Для того, чтобы иметь возможность отображать информацию в форме, которую вы хотели бы, вам нужно дать эти конкретные вводы имен интересов. Я бы порекомендовал вам иметь:

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

Для меня решение было очень простым. Я изменил <form>тег в <div>и ошибка исчезнет.

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

Это три вещи, которые необходимо использовать ngModel внутри директивы formGroup.

Обратите внимание, что следует использовать то же имя.