LoginSignup
3

More than 5 years have passed since last update.

Angular2 タグのプロパティとして for や 任意

Last updated at Posted at 2016-03-21

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>

それにしても、書き方色々あってめんどいなぁ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3