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
          возврат targetValue == viewVale;//равен ли targetValue значению passwordConfirm
        }
        ctrl.$formatters.push(function (value) {
          console.log("Производится форматирование данных значения:",value)
          возврат значения;
        )
        ctrl.$parsers.push(function (value) {
          console.log("Производится преобразование данных значения:",value)
          возврат значения;
        )
      }
    }
  }
)

Адрес демонстрации:https://tianyouh.github.io/angularPasswordConfirm/

Смотри также