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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

Ответ 3

Оба атрибута необходимы, а также перепроверять все элементы формы с атрибутом "name". если вы используете концепцию представления формы, другие разумные просто используют тег div вместо элемента form.

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

Вам нужно импортировать {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);}

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

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