将信息传递给指令以匹配密码

Question

当我的控制器满足某些条件时，我正在尝试向我的浮动占位符标签添加错误

但是，我不确定解决此问题的最佳方法，而且我当前的实施似乎没有检测到指令中的属性更改（自定义错误保持设置为 "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

Answer 1

看过你的代码。您是否在 SignUpController 中定义了范围变量

_this.PasswordFirst 和 _this.PasswordSecond

还有你控制器中的这一行

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

好的建议是在指令中实现它，因为可以在指令中正确访问属性

Answer 2

（我是根据你说的 'custom-error stays set to "test"'）

自定义错误正在查找 "test" 的变量，而不是 "test" 的字符串值。您是否尝试过在控制器中设置变量测试并更新它？

Answer 3

匹配密码的验证器指令

要有一个form match password inputs, create a custom directive that hooks into the ngModelController API ($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 - Modifying Built-in Validators

The DEMO

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>

将信息传递给指令以匹配密码

Passing Information to Directive to Match Passwords

angularjs

angularjs-directive

angularjs-ng-form

angularjs-ng-model

匹配密码的验证器指令

The DEMO