2017-04-10 2 views
1

まず、[(ngModel)]を使用して入力をバインドする場合、Angular 2にname属性が必要な理由はわかりません。そうでなければ、私はこのエラーを取得:角度2のループで[(ngModel)]を使用して双方向バインディングの名前属性を生成する方法は?

ERROR Error: If ngModel is used within a form tag, either the name 
    attribute must be set or the form control must be defined as 
    'standalone' in ngModelOptions. 

それは通常問題ではないのですが、私は* ngForを使用してループでそれをどのように行うのですか?インデックス(角度1の$ indexのような)は利用できますか?

+0

はあなたが反復処理されているものの名​​前を使用することはできません:あなたのループは、このインデックスを使用することによって非常に簡単に解決することができ

エドゥアルドによって提案さそうのような、? –

+1

'* ngFor ="棒のfooを; i = index "とすると、' i'変数を使うことができます。 – n00dl3

答えて

1

この方法でインデックスを取得し、i変数で入力名を明示的に作成できます。

First of all, I don't understand why Angular 2 requires a name attribute if binding input using [(ngModel)]

ここから集められたいくつかの情報::Official docs for Forms:質問に対処するには

<ul *ngFor="let item of items; let i = index"> 
    <input name="{{i}}"/> 
</ul> 
+0

それは素晴らしいです。ありがとう!しかし、2つのマイナーな修正があります。1.より新しい角型リリースの場合は、*の代わりにletを使用します。2. iの代わりにユーザー{{i}}を使用します。 – newman

+0

更新ありがとう! –

0

まずオフを、私たちはただの形でこれを必要とします。フォームと組み合わせて[(ngModel)]を使用する場合は、名前属性が必要です。

内部では、FormControlのインスタンスを作成し、NgFormディレクティブに登録します。角度は、タグにNgForm命令を自動的に付加します。 NgFormディレクティブは、フォーム要素に追加機能を追加します。 ngModelディレクティブとnameアトリビュートの要素に対して作成したコントロールを保持し、それらのプロパティ(妥当性を含む)を監視します。

FormControlは、name属性に割り当てた名前で登録されています。したがって、これは各名前が一意である必要があることを意味し、そうでなければ同じ名前を持つ各フィールドは同じものとして評価されます。

通常は、ループの外で、それを行うのは十分だろう。

<input [(ngModel)]="item.name" name="name"> 

しかし、ループ内のすべてのフィールドが同じname -attributeを持つことになり、これが、十分ではありません。

<ul *ngFor="let item of items; let i = index"> 
    <input [(ngModel)]="item.name" name="name{{i}}"/> 
</ul> 
関連する問題