Angular2 ngModelがformタグ内で使用される場合、name属性を設定する必要があるか、フォーム


216

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

core.umd.js:5995例外:キャッチされていません(約束どおり):エラー:app / model_exposure_currencies / model_exposure_currencies.component.html:57:18でエラーが発生しました:フォームタグ内でngModelが使用されている場合、名前属性のいずれかが必要ですセットまたはフォームコントロールは、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()">

2
正しい答えとして答えの1つを授与するcosider
G. Stoynev

回答:


419

ngFormを使用する場合、すべての入力フィールドには、値を持つ[(ngModel)]=""属性が必要です。

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


1
名前属性には一意の値が必要ですか?
Alexander Mills

2
Angular 5のドキュメント(angular.io/guide/forms)から:「フォーム属性と組み合わせて[(ngModel)]を使用する場合、名前属性を定義する必要があります。」
エルシェフ2018

2
Angular 7にも適用可能です!
coderpc

2
ngModelが名前の前にある場合にのみ機能することを付け加えておきます。
ロナルドアベラノ

55

すべての開発者が完全なエラーを読むのではなく、共通の習慣を持っているので、最初の行を読んで他の誰かからの答えを探し始めてください:) :)私もそれらの1人なので、ここにいるのはそのためです。

エラーを読み、明確に言ってください:

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

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

いずれか1つのオプションを使用すると、すべてがスムーズに動作します。


25
それぞれの選択肢の意味と効果の説明は役に立ちます。2つの中から1つを任意に選択するのは良い考えのようには思えません。
Michael

2
愛しています:)))))
Lola

1
ここに良い説明があり[ngModelOptions]="{standalone: true}ます:stackoverflow.com/a/38368261/3135317。私の場合、ネストされた配列に `* ngFor *がある場合、フォームタグ内で恐ろしい` ngModelが使用されています。名前属性が必要です... `エラーが発生しました。モデルのバインドは問題なく、テンプレートは失敗しました。「例1」は機能していない可能性があります。「例2」は完璧でした。
FoggyDay

この回答は、同じ週に2度私を助けてくれました(どうやら、最初にくっついなかったようです);)
Jay Cummins

30

両方の属性が必要であり、「name」属性を持つすべてのフォーム要素を再確認します。フォーム送信の概念を使用している場合は、フォーム要素の代わりにdivタグを使用してください。

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

30

私の場合、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つの間に他の要素がある場合、間違いの原因を見つけるのは困難です。 ここに画像の説明を入力してください


16

コンソールをはっきりと見ると、2つの例が表示されます。これらのいずれかを実装します。

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

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


16

Chromeデベロッパーツールでは、最初の要素に名前が正しく設定されていても、最初の要素に赤い下線が付いているだけである場合があることに気付きました。これはしばらく私を失望させた。

一つは、追加して確認する必要があります名前をするごとにかかわらず、1が波線下線が引かれているのngModelを含むフォーム上の要素。


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属性を追加しただけで、問題が解決しました。次のように:selectcheckbox

<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属性は、問題を修正します。


3

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

これを試して...

    <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

エラーメッセージ自体でパニックにならないが、ここからの例が機能しない理由を説明するためにググるだけの場合(つまり、テキストが入力フィールドに入力されたときに動的フィルタリングが発生しない):機能しません入力フィールドに名前パラメーターを追加するまで。パイプが機能しない理由の説明はありませんが、エラーメッセージがこのトピックを示しており、受け入れられた回答に従って修正すると、動的フィルターが機能します。



2

希望する形式で情報を表示できるようにするには、関心のある名前の特定の入力を提供する必要があります。私はあなたが持っていることをお勧めします:


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

2

私にとって、解決策は非常に簡単でした。<form>タグをa に変更する<div>と、エラーはなくなります。


1
これは、フォームを削除して、フォームが提供するすべての機能を削除するためです。
astro8891

@ astro8891 me no need feature
John Henckel

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

これらは、formGroupディレクティブ内でngModelを使用するために必要な3つのことです。

同じ名前を使用する必要があることに注意してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.