AngularJS2 で フォーム要素に対して for を使いたい場面は少なくないはず。
バリデーション等の機能を備えたLibraryを使ってたりすると避けられないことも。
test.html
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1" class="">Textarea</label>
>/div>
AngularJS2を利用して indexを動的に変更する場合、感覚的に下記のように書くと
Can't bind to 'for' since it isn't a known native property ("
なるエラーが発生したりする。
動かないサンプル
<div class="input-field col s12">
<textarea id="textarea{{index}}" class="materialize-textarea"></textarea>
<label for="textarea{{index}}" class="">Textarea</label>
>/div>
解消するために2点修正
- for ⇒ [attr.for] とする。
- {{}} は不要 "" 内が既に js に解釈される
動かないサンプル
<div class="input-field col s12">
<textarea id="textarea{{index}}" class="materialize-textarea"></textarea>
<label [attr.for]="'textarea' + index" class="">Textarea</label>
>/div>
それにしても、書き方色々あってめんどいなぁ