AngularJSとBootstrap3でフォームのバリデーションをしてエラー状態を表示しようとしたらハマった(^^);

AngularJSとBootstrap3でフォームのバリデーションをしてエラー状態を表示しようとしたらハマった(^^);

見た目としてはこうしたいわけだ。

そこで、このようなコードを書いた。

<form name="myForm">
  <div class="form-group" ng-class="{has-error:!myForm.name.$valid}">
    <label class="control-label" for="plName">名前</label>
    <input type="text" class="form-control" name="name" ng-model="name" placeholder="名前" required>
  </div>
</form>

しかし、上のコードは思ったようには動かない。下が動くコードだ。

<form name="myForm">
<div class="form-group" ng-class="{'has-error':!myForm.name.$valid}">
<label class="control-label" for="plName">名前</label>
<input type="text" class="form-control" name="name" ng-model="name" placeholder="名前" required>
</div>
</form>

どこが間違っているか分かるだろうか？

「has-error」を「'has-error'」としなければならない。つまり、CSSクラス名はシングルクオートで囲っとけ！

以上、終了。