English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

angularjsフォームパスワード検証カスタムディレクティブの実現コード

HTMLコード

<form name="form">
    <input type="password" name="password" ng-model="password" required placeholder="パスワードを入力してください">
    <input type="password" name="passwordConfirm" ng-model="passwordConfirm" equal-to="password" placeholder="パスワードをもう一度入力してください">
    <span ng-show="form.passwordConfirm.$error.equalTo">パスワードが一致しません</span>
  </form>

js

angular.module("Valid",[])
.directive("equalTo", function () {
  return {
    require: "ngModel",
    link: function (scope, ele, attrs, ctrl) {
      console.log(scope);//現在のスコープを印刷
      console.log(attrs);//現在のタグ属性リストを印刷
      console.log(ctrl);//現在のctrlを印刷
      var target = attrs["equalTo"];//カスタムインストラクション属性のキー値を取得
      if (target) {//キーが存在するかどうかを確認
        scope.$watch(target, function () {//値が存在する場合、リスナーを起動
          ctrl.$validate()//手動で変更が行われるたびにバリデーションを呼び出す
        } 
        // 現在のモデルコントローラの親コントローラFormControllerを取得
        var targetCtrl = ctrl.$$parentForm[target];//指定のモデルコントローラを取得
        console.log(targetCtrl)
        ctrl.$validators.equalTo = function (modelValue, viewVale) {//カスタムバリデータコンテンツ
          var targetValue = targetCtrl.$viewValue;//passwordの入力値を取得
          return targetValue == viewVale;//passwordConfirmの値と等しいか
        }
        ctrl.$formatters.push(function (value) {
          console.log("データフォーマット中の値:", value)
          return value;
        }
        ctrl.$parsers.push(function (value) {
          console.log("データ変換中の値:", value)
          return value;
        }
      }
    }
  }
}

デモの場所:https://tianyouh.github.io/angularPasswordConfirm/

おすすめ