web-dev-qa-db-ja.com

Angular 2 ngModelがフォームタグ内で使用されている場合は、name属性を設定するかフォームを設定する必要があります。

Angular 2からこのエラーが発生しています

core.umd.js：5995例外：捕捉されていない（見込みで）：エラー：app/model_exposure_currencies/model_exposure_currencies.component.htmlのエラー：57：18原因：フォームタグ内でngModelが使用されている場合は、name属性を指定する必要がありますsetまたはフォームコントロールはngModelOptionsで 'standalone'として定義されなければなりません。

      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()">
angularangular-forms
153
Tampa

NgFormが使われる場合、[(ngModel)]=""を持つすべての入力フィールドは値を持つ属性 name を持っていなければなりません。

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

すべての開発者は、完全なエラーを読むのではなく、一般的な習慣を持っているので、最初の行を読んで、他の誰かからの答えを探してください:) :)

明確に言って、エラーを読んでください。

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

このエラーを理解するためにさらに何が必要ですか？

任意の1つのオプションを使用すると、すべてがスムーズに機能します。

32
Ali Adravi

両方の属性が必要であり、またすべてのフォーム要素が "name"属性を持つことを再確認してください。あなたがフォーム送信の概念を使用しているならば、他の賢い方法はフォーム要素の代わりにdivタグを使用することです。

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

コンソールをよく見ると、2つの例があります。これらのいずれかを実装します。

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

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

13
RAHUL KUMAR

Chrome開発者ツールでは、名前が正しく設定されていても、最初の要素に赤で強調表示されているだけのものがあることに気付きました。これは私をしばらくの間止めました。

下線が引かれているものに関係なく、ngModelを含むフォームに name to every 要素を必ず追加する必要があります。

9
Eric

私の場合は、エラーが発生したのは、以下のHTMLマークアップで、 name 属性なしでもう1行が存在したためです。

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

しかし、ブラウザはまだ最初の行にエラーがあると報告します。これら2つの要素の間に他の要素があると、間違いの原因を見つけるのは困難です。 enter image description here

8
elshev

あなたのpage.tsの@ angular/formsから{NgForm}をインポートする必要があります。

コード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
João Paulo Paiva

これを試して...

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

エラーメッセージ自体でパニックに陥らないが、なぜ here の例が機能しないのかを説明するためにグーグルで検索するすべての人（つまり、テキストが入力に入力されたときに動的フィルタリングが発生しない） field）：入力フィールドにnameパラメーターを追加するまで機能しません。パイプが機能しない理由の説明を示すものはありませんが、エラーメッセージはこのトピックを示しており、受け入れられた回答に従って修正すると、動的フィルターが機能します。

2
Ilya Yevlampiev

あなたが使っているバージョンについては触れませんでしたが、あなたがrc5やrc6を使っているなら、その「古い」形式のフォームは推奨されていません。 「新しい」フォームのテクニックに関するガイダンスについては、これを見てください。 https://angular.io/docs/ts/latest/guide/forms.html

2
John Baird

あなたが望む形式で情報を表示することができるようにするために、あなたは興味の名前のそれらの特定の入力を与える必要があります。私はあなたが持っていることをお勧めします：

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

私にとっては、解決策は非常に単純でした。私は<form>タグを<div>に変更しました、そして、エラーは消えます。

1
John Henckel

修正は非常に簡単です。

私にとっては、フォームに複数の入力がありました。エラーの原因となっている入力/行を分離し、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属性を指定するだけで問題が修正されます。

0
Kailas