Angular2 Якщо ngModel використовується в тезі форми, повинен бути встановлений або атрибут імені, або форма

Я отримую цю помилку від Angular 2

core. Набір або керування формою потрібно визначати як "автономний" у 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}">

Що ще нам потрібно, щоб зрозуміти цю помилку?

Використовуйте будь-який варіант, все буде працювати без проблем

Обидва атрибути потрібні, а також перевірте всі елементи форми, які мають атрибут "name". якщо ви використовуєте концепцію подання форми, інші мудрі просто використовують тег div замість елемента форми.

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

У моєму випадку помилка сталася через те, що внизу в розмітці html ще один рядок існував без атрибута імені .

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

Але браузер все ще повідомляє, що перший рядок має помилку. І важко виявити джерело помилки, якщо між цими двома є інші елементи.

Коли ви чітко подивитеся на консоль, вона дасть вам два приклади. Виконайте будь-який із них.

<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 / form у свою сторінку.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>

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

Ви не згадали про використовувану вами версію, але якщо ви використовуєте 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>тег на a, <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.

Зауважте, що слід використовувати те саме ім’я.