Передача информации в директиву для сопоставления паролей

Я пытаюсь добавить ошибки к моим плавающим меткам-заполнителям, когда в моем контроллере выполняются определенные условия

Тем не менее, я не уверен, что лучший способ сделать это, и моя текущая реализация, похоже, не обнаруживает изменение атрибута в директиве (custom-error остается равным "test").

Вот что у меня есть сейчас:

HTML:

<input type="password" float-placeholder
       custom-error="test" placeholder="Confirm password"
       required name="passwordSecond" id="passwordSecond"
       ng-model="vs.PasswordSecond" />

Директива:

angular.module('myApp').directive('floatPlaceholder', function ($window) {
  return {
    restrict: 'A',
    scope: {
      customError: '@'
    },
    link: function (scope, element, attrs) {
      element.after("<label class='floating-placeholder'>" + attrs.placeholder + "</label>");
      var label = angular.element(ele.parent()[0].getElementsByClassName('floating-placeholder'));

      element.on('blur', function() {
        if (ele.val().length > 0) { 
          if (scope.customError) {
            label.text(attrs.placeholder + ' - ' + scope.customError);
          }
        }
      }
    }
  };
});

контроллер:

angular.module('myApp').controller('SignupController', function factory() {
  _this.confirmPassword = () => {
    if(_this.PasswordFirst !== _this.PasswordSecond){
      angular.element(signupForm.passwordSecond).attr('custom-error', _this.Error);
    }
  }
});

Я использую Angular 1.6

Источник

3 ответа

Решение

Директива валидатора, которая соответствует паролям

Чтобы форма соответствовала вводу пароля, создайте пользовательскую директиву, которая подключается к API ngModelController ($ validators):

app.directive("matchWith", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope,elem,attrs,ngModel) {
    ngModel.$validators.match = function(modelValue, viewValue) {
        if (ngModel.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }
        var matchValue = scope.$eval(attrs.matchWith);
        if (matchValue == modelValue) {
          // it is valid
          return true;
        }
        // it is invalid
        return false;
    };
  }
})

Для получения дополнительной информации см. AngularJS Developer Guide - Forms - Изменение встроенных валидаторов

ДЕМО 

angular.module("app",[])
.directive("matchWith", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope,elem,attrs,ngModel) {
    ngModel.$validators.match = function(modelValue, viewValue) {
        if (ngModel.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }
        var matchValue = scope.$eval(attrs.matchWith);
        if (matchValue == modelValue) {
          // it is valid
          return true;
        }
        // it is invalid
        return false;
    };
  }
})
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <form name="form1">
        <input type="password" name="password1" required
               placeholder="Enter password"
               ng-model="vm.password1" />
        <br>
        <input type="password" name="password2" required
               placeholder="Confirm password"
               ng-model="vm.password2"
               match-with="vm.password1"
               ng-model-options="{updateOn: 'blur'}" />
        <br>
        <p ng-show="form1.password2.$error.match">
          Passwords don't match
        </p>
        <input type="submit" value="submit" />
    </form>
  </body>

Источник

Посмотрел твой код. Вы определили переменные области в SignUpController

_this.PasswordFirst и _this.PasswordSecond

Также эта строка в вашем контроллере

angular.element(signupForm.passwordSecond).attr('custom-error', _this.Error);

хорошее предложение было бы реализовать это в директиве, так как атрибуты могут быть правильно доступны в директиве

Источник

(Я основываю это на том, что вы говорите, что "custom-error остается"test")

custom-error ищет переменную "test", а не строковое значение "test". Вы пытались установить переменную test в вашем контроллере и обновить ее?

Источник
Другие вопросы по тегам