AngularJsを使ってみる―Form編―

値の判定機能を持った、基本的なフォーム操作のサンプルです。

何らかのプレヴュー画面があって、値を入力すると動的に反映されますが、サブミットしないとDBなどには追加されません。

イメージとしては、ng-repeatで回ってきているproductを引数にとって、そこにpushなんかでreviewを追加する感じですね。それをDB向けに加工するための関数なんかに回すとすっきりしそうです。

フォーム作成時に、novalidateでまずはデフォルトのバリデーション設定を解除しておきます。
また、$validという値を使うと簡単に現在の状態が取得できるので、ボタンの有効化などを設定できます。

<!--  Review Form -->
<!-- $valid is only true when all "required" and formats are valid. -->
<form name="reviewForm" ng-controller="ReviewCtrl" 
    ng-submit="reviewForm.$valid && addReview(product)" novalidate>

  <!--  Live Preview -->
  <blockquote >
      <strong>{{stars}} Stars</strong>
      {{body}}
      <cite class="clearfix">{{author}}</cite>
  </blockquote>

  <!--  Review Form -->
  <h4>Submit a Review</h4>
  <fieldset>
        <select ng-model="stars" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required>
            Rate the Product
        </select>
    </fieldset>
    <fieldset>
        <textarea ng-model="body" placeholder="Write a short review of the product..." title="Review"></textarea>
    </fieldset>
    <fieldset>
        <input ng-model="author" type="email" placeholder="example@example.com" title="Email" required />
    </fieldset>
    <fieldset class="form-group">
        <input type="submit" value="Submit Review"/>
    </fieldset>
</form>

ちなみに、入力中に値がエラーである場合に背景を赤にしたい、といった場合はCSSに次のように書きます。
invalidだけだと、ページを開いた時から赤くなってしまうためです。

.ng-invalid.ng-dirty{
    background-color: red;
}

また、モデル内でURLを指定している画像の読み込み時にも注意が必要です。ng-srcタグを使わないと、読み込みの順序の関係で失敗します。

<img ng-src={{product.image}}/>