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

219

Я получаю эту ошибку от 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()">
Tampa
источник
2
cosider присуждает один из ответов как правильный
Г. Стойнев

Ответы:

422

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

<input [(ngModel)]="firstname" name="something">
Тьягараджан С
источник
1
поиск «атрибут имени» в этом angular.io/docs/ts/latest/api/forms/index/…
C
1
атрибут name должен иметь уникальное значение?
Александр Миллс
2
Из документации Angular 5 ( angular.io/guide/forms ): «Определение атрибута name является обязательным требованием при использовании [(ngModel)] в сочетании с формой».
Елшев
2
Применимо к Angular 7 тоже!
coderpc
2
Я хотел бы добавить, что это будет работать только в том случае, если ngModel будет первым перед именем.
Рональд Абельяно
55

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

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

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

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

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

Али Адрави
источник
25
Было бы полезно объяснить значение / влияние каждой альтернативы - произвольно выбрать один из двух вариантов не кажется хорошей идеей.
Майкл
2
люблю тебя :)))))
Лола
1
Вот хорошее объяснение для [ngModelOptions]="{standalone: true}: stackoverflow.com/a/38368261/3135317 . В моем случае, я понял, что страшный `ngModel используется внутри тега формы, либо атрибут name должен ...` ошибка, когда у меня был `* ngFor * для вложенного массива. Привязка модели была в порядке, шаблон срублен. «Пример 1» НЕ МОЖЕТ работать; «Пример 2» был идеальным.
FoggyDay
Этот ответ помог мне дважды за одну и ту же неделю (очевидно, он не слипался в первый раз);)
Джей Камминс,
31

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

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

elshev
источник
30

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

<input [(ngModel)]="firstname" name="something">
Винаяк Шеджери
источник
16

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

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

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

РАХУЛ КУМАР
источник
16

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

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

Эрик
источник
10

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

Для меня у нас было более одного ввода в форме. Нам нужно изолировать ввод / строку, вызывающую ошибку, и просто добавить 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атрибута решит проблему.

Кайлас
источник
3

Вам нужно импортировать {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);}
Жоау Пауло Пайва
источник
3

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

    <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>
Саи Кришна
источник
3

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

Илья Евлампиев
источник
2

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

Джон Бэйрд
источник
2

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


<form #f="ngForm" (ngSubmit)="onSubmit(f)"> ...
<input **name="firstName" ngModel** placeholder="Enter your first name"> ...
thnkr22
источник
2

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

Джон Хенкель
источник
1
Это потому, что вы удаляете форму, тем самым удаляя все функции, которые предоставляет форма.
astro8891
@ astro8891 мне не нужна особенность
Джон Хенкель
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" 

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

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

Akitha_MJ
источник