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