#1困っていることAngularの双方向データバインディングを利用する際に、[(ngModel)]を付与するinputタグのname属性は、一意にすることが必須でしょうか。template→component方向のバインドはうまくいくのですが、component→templateのバインドがうまくいかず(同じname属性をもつ要素全てに同じ値が表示されてしまう。name属性が重複していても正しくバインドできるノウハウをお持ちの方がいらっしゃれば、ご教示頂けると幸甚です。#2NgFormの値として利用したい場合は一意にすることが必須です。nameはフォームの値をjsonにした時、オブジェクトのキーとなることを考えれば全ての値が同じになってしまうような不具合が起こることは想像に難くないと思います。(記述によっては不具合が露見しない場合もあります)同一のnameを利用したい理由によって対応は変わってきますが、以下のような手法が考えられるかと思います。}"を付与することで、NgForm内の値ではないことを明示的に示すことができます。することで、NgFormとコントロールのヒモ付が解除され、nameが持つAngular的な文脈も消滅します。ようなコードを書いていなければ有効でしょう。以下のような記述で問題は解決されるかと思います。name属性が意味を持たないのであれば[ngModelOptions]を付与してname属性は記述しないことをオススメします。form要素の中でngModelを利用するからこういうことになるのであって、おもむろにngModelを利用する分には問題ないはずです。input要素の親階層に#f="ngForm"みたいな記述があるがform要素になっているはずなので、ngFormを利用していないのであればそれを消しましょう。(ngFormを利用している場合はもちろんエラーになります)form要素を除外してしまいしょう。formの中に入れ子にしないことで、そもそもname属性を省いてngModelを利用することができるようになります。利用するNgFormとのヒモづけをしたまま使いたい場合、ngModelGroupでくくる必要があります。}}どの手法を取るのが最適かについては情報が少ないのでなんとも言えませんが、a)かd)になるかと思います。Stackblitzなどで再現コードを作成すると良いでしょう。こちらは一意でなくとも、ngmodelには影響がないかと思います。app.component.htmlで同一nameのinputがあります。パターンですが、仮に親要素にformをおいても不具合はないように見えるかと思います。このコードでは、初期値を準備すると問題が露見するようになります。d-okuさんのコードをお借りして問題のあるコードを作ってみました。初期値がどちらもfooになっていますね。name=“ここの名前が一意”>ということでしょうか?こちらは一意でなくとも、ngmodelには影響がないかと思います。app.component.htmlで同一nameのinputがあります。#4akaiさん非常にご丁寧なご説明ありがとうございます。利用するの対応で事象が解決することを確認できました。ありがとうございました。1点気になることがあります。input要素を囲んでいたformタグ自体を消すことでも事象が解決しました。formタグには#f="ngForm"のような記載はしていなかったのですが、formタグを消すことでも事象が解決する理由はなぜなのかがよく分かりません。#f="ngForm"のような記載がなくても、formタグが存在するだけでデフォルトでngFormとして扱われるものなのでしょうか?formタグの記載は以下の通りでした。#5d-okuさんご回答ありがとうございます。akaiさんのご回答と併せて解決することができました。ありがとうございました。#6#f="ngForm"のような記載がなくても、formタグが存在するだけでデフォルトでngFormとして扱われるものなのでしょうか?そんなことはないはずと思って以下のコードで確認しましたが、そんなことありましたね。CLI親要素にform要素があるだけで、コントロール(NgModel)にformDirective(NgForm)が付与されています。(解答時はされないと思っていた)よく考えたら#f="ngForm"はディレクティブでなくて、exportAsされたngFormを関連付けするためだけのものなので、それ自体がngFormを生み出すとかではなく、ngModelを子に持つform要素自体が、NgFormのインスタンスを持つような仕組みになってるんですね。解答の方、少し修正しておきます。#7ところで、これまでの会話を踏まえて、d-okuさんのコードをお借りして問題のあるコードを作ってみました。初期値がどちらもfooになっていますね。CLI変更した箇所はngModelの親要素をform要素にinput1とinput2にそれぞれ別の初期値を与えると言ったものです。再現方法はわからないのですが、リアクティブに入力が同期されてしまう不具合とかを出した記憶もあるので、テンプレートドリブンフォームを利用する際はnameに気をつけましょう。#8@akaiあまりテンプレートエンジンを使っていない&nameを使わなかったので気づいてませんでした。一緒に勉強になりました。ありがとうございます。ホームカテゴリFAQ/ガイドライン利用規約プライバシーポリシーDiscourseにより提供されています。最適な表示のために、Javascriptを有効にしてください。