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

Если используется 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>

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

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

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

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

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

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

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

или

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

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

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

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

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

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

Вы не упомянули версию, которую используете, но если вы используете 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.

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