【angularjs】パスワード確認用入力フォームを実装する

angularjs ionic

今回やりたかったのは、サインアップ画面等でパスワードとパスワード(確認用)の入力画面を用意して、一致していなかったらバリデーションではじく。というありがちな画面。

https://github.com/TheSharpieOne/angular-validation-match
探したところこちらにちょうどやりたいことができるライブラリがありました。以下みたいな感じでやりたいことができました。

js

angular.module('starter', [
  ・・・
  'validation.match'
])
・・・

angular.module('starter.controllers')
.controller("SignupCtrl", function(
) {
  $scope.my_form = {};
  $scope.my_form.password = '';
  $scope.my_form.password_confirm = '';
  ・・・
})

template

<form name="form" novalidation>
  Password : <input type="password" name="password" ng-model="my_form.password" />
  Password(Confirm) : <input type="password" name="password_confirm" ng-model="my_form.password_confirm" match="my_form.password" match-caseless="true" />
  ・・・
  <span ng-show="form.password_confirm.$invalid">
    パスワードが一致しません
  </span>
</form>

以上です。