みなさんこんにちは。Angularの小ネタです。
AngularでngModelというと双方向バインディングが頭に浮かぶと思います。
<input [(ngModel)]="<!--双方向バインディングしたい変数名-->" name="hoge" />しかしNgModelの公式のリファレンス読むと、以下のことがわかります。
https://angular.io/api/forms/NgModel
- ngModelはNgModel(Directive)のディレクティブセレクタである
- ngModelはNgModel(Class) のmodelプロパティへのInputセレクタでもある
つまり、
[(ngModel)]="<!--双方向バインディングしたい変数名-->"というのはディレクティブセレクタを兼ねつつInputセレクタの役割もしているわけですね。
逆に考えると、
<input #hoge ngModel name="hoge" />とし、
<form #form="ngForm" (submit)="onSubmit(hoge.value)">という感じでアクセスすることが可能だというわけです。双方向バインディング用の変数を用意しておきながら使わないという状況であれば、このほうがスッキリします。
さらに、初期値を与えたい場合、
<input #hoge [ngModel]="0" name="hoge" />みたいな感じにするといけてしまいます。
以上です。
