【ionic】angular-messageで入力フォームのバリデーションとエラーメッセージを実装する

はじめに

今回やりたかったことは入力フォームにバリデーション機能を実装して、不備があった場合は送信ボタンを押せなくして不備の内容を画面に表示するということ。今回は angular-messages というライブラリを使った。

angular-messagesのインストール

$ bower install angular-messages#1.5.3

index.html

<script src="lib/angular-messages/angular-messages.js"></script>

実装する項目としては以下のようなかんじ。
・名前
・名前カナ(カタカナのみ)
・生年月日(正しい日付のみ)
・郵便番号(数字7桁のみ)

実装

テンプレート

<form name="form novalidate>

  <label>名前</label>
  <input type="text" name="name" ng-model="user.name" ng-required="true" ng-model-options="{updateOn: 'blur'}" />

  <label>名前カナ</label>
  <input type="text" name="kana" ng-model="user.kana" ng-required="true" ng-pattern="/^[ァ-ン\s]+$/" ng-model-options="{updateOn: 'blur'}" />

  <label>生年月日</label>
  <input type="date" name="birthday" ng-model="user.birthday" ng-required="true" />

  <label>郵便番号</label>
  <input type="tel" name="zipcode" ng-model="user.zipcode" ng-required="true" ng-pattern="/^[0-9]{7}$/" maxlength="7" />

  <!-- エラーメッセージ -->
  <div>
    <span ng-messages="form.kana.$error" ng-show="form.kana.$dirty">
      <p ng-message="pattern">名前カナはカタカナで入力してください</p>
    </span>
    <span ng-messages="form.birthday.$error" ng-show="form.birthday.$dirty">
      <p ng-message="date">生年月日に正しい日付を入力してください</p>
    </span>                                                                                                                                                                                                        
    <span ng-messages="form.zipcode.$error" ng-show="form.zipcode.$dirty">
      <p ng-message="pattern">郵便番号は数字7桁で入力してください</p>
    </span>
  </div>

  <!-- 送信ボタン -->
  <buton class="btn" ng-click="form.$valid && save()" ng-class="{btn_invalid: !form.$valid, btn_valid: form.$valid}">送信</button>

</form>

以上です