Angular2 Se ngModel for usado em uma tag de formulário, o atributo name deverá ser definido ou o formulário

Estou recebendo esse erro do Angular 2

core.umd.js: 5995 EXCEÇÃO: Não capturado (em promessa): Erro: Erro no app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 causado por: Se ngModel for usado em uma tag de formulário, o atributo name deverá ser set ou o controle de formulário deve ser definido como 'autônomo' em 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>

É assim que eu uso a tag form:

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

Se ngForm for usado, todos os campos de entrada que tiverem [(ngModel)]=""que ter um nome de atributo com um valor.

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

Como todo desenvolvedor tem o hábito comum de não ler o erro completo, basta ler a primeira linha e começar a procurar a resposta de outra pessoa :) :) Eu também sou um deles, por isso estou aqui:

Leia o erro, dizendo claramente:

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

O que mais precisamos para entender esse erro?

Use qualquer opção para que tudo funcione bem.

Os dois atributos são necessários e também checam novamente todos os elementos do formulário com o atributo "name". se você estiver usando o conceito de envio de formulário, caso contrário, use a tag div em vez do elemento do formulário.

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

No meu caso, o erro ocorreu porque abaixo na marcação html havia mais uma linha sem o atributo 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>

Mas o navegador ainda relata a primeira linha com o erro. E é difícil descobrir a fonte do erro se você tiver outros elementos entre esses dois.

Quando você olha claramente para o console, ele fornece dois exemplos.

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

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

Notei que a ferramenta de desenvolvedor do Chrome às vezes apenas sublinha o primeiro elemento em vermelho swiggly, mesmo se estiver corretamente configurado com um nome. Isso me assustou por um tempo.

É necessário adicionar um nome a cada elemento no formulário que contém ngModel, independentemente de qual deles esteja sublinhado.

É bastante fácil para uma correção.

Para mim, tivemos mais de uma entrada no formulário. Precisamos isolar a entrada / linha causando erro e simplesmente adicionar o nameatributo Isso corrigiu o problema para mim:

Antes:

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

Depois: i acabou de adicionar o nameatributo para selecte checkboxe que corrigiu o problema. Do seguinte modo:

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

Como você vê, adicionou o nameatributo. Não é necessário receber o mesmo ngModelnome que você. Basta fornecer o nameatributo para corrigir o problema.

Você precisa importar {NgForm} de @ angular / forms em seu page.ts;

Código 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>

Em seu Page.ts, implemente sua função para manipular dados do formulário:

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

Tente isso ...

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

Para todos que não entram em pânico com a própria mensagem de erro, mas apenas pesquisam a explicação de por que o exemplo daqui não funciona ( por exemplo, a filtragem dinâmica não ocorre quando o texto é digitado no campo de entrada): não funciona até você adicionar o parâmetro name no campo de entrada. Nada aponta para a explicação de por que o canal não está funcionando, mas a mensagem de erro aponta para este tópico e corrigi-lo de acordo com a resposta aceita faz o filtro dinâmico funcionar.

Você não mencionou a versão que está usando, mas se estiver usando rc5 ou rc6, esse estilo "antigo" de formulário foi preterido. Dê uma olhada nisto para obter orientação sobre as "novas" técnicas de formulários: https://angular.io/docs/ts/latest/guide/forms.html

Para poder exibir as informações da forma que você deseja, é necessário fornecer essas entradas específicas de nomes de interesse. Eu recomendo que você tenha:

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

Para mim, a solução foi muito simples. Mudei a <form>tag para um <div>e o erro desapareceu.

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

Essas são as três coisas necessárias para usar o ngModel dentro de uma diretiva formGroup.

Observe que o mesmo nome deve ser usado.