Question

任何人都可以向我解释这段代码是如何工作的。

HTML标记

<input type="password" ng-model="password" class="form-control" placeholder="Password" required>
<input type="password" ng-model="confirm_password" class="form-control" placeholder="Password" required validate-equals="password">

指令代码

＆＃39;使用严格的＆＃39;;

angular.module('raJwtApp')
  .directive('validateEquals', function () {
    return {
      require: "ngModel",   
      link: function postLink(scope, element, attrs, ngModelCtrl) {
        function validate(value){
          console.log(value, scope.$eval(attrs.validateEquals));
            var valid = (value === scope.$eval(attrs.validateEquals));
            ngModelCtrl.$setValidity('equal', valid);
            return valid ? value : undefined;
        }

        ngModelCtrl.$parsers.push(validate);
        ngModelCtrl.$formatters.push(validate);

        scope.$watch(attrs.validateEquals, function(){
            ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
        })
      }
    };
  });

任何人都可以在下面解释questions。

以下代码在directive中的作用是什么？ 我真的不了解密码匹配指令的工作原理吗？

$scope.watch(attrs.validateEquals, function(){  
    //ngModelCtrl.$viewValue always returns undefined      
    ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
});

Answer 1

Angular没有$ setDirty（虽然它确实有$ setPristine），所以将模型设置为脏的方法是通过它的控制：

ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);

因此，在您的指令中，$ watch正在检查validateEquals属性（密码）的更改，然后将模型设置为脏。

Answer 2

<form name="password_form">
    <input type="password" ng-model="password" class="form-control" placeholder="Password" required>
    <input type="password" ng-model="confirm_password" class="form-control" placeholder="Password" required validate-equals="password">
</form>
<button ng-disabled="password_form.$invalid">save</button>

在<form>中，您可以通过检查表单的标记来执行角度验证，例如$invalid或$error（https://docs.angularjs.org/guide/forms（自定义验证））

这对于简单验证很有用，例如：

必填字段（将required添加到<input>）或
最少＃个字符（添加min='5'）

如果任一要求失败，

和password_form.$invalid将自动设置。

validate-equals是一个指令，用于在两个密码字段不匹配时手动设置表单的$invalid（或$dirty？）标记。

调用

$setViewValue来重新评估表单的有效性。

每次更改输入（调用$ setViewValue）或绑定模型更改时，都会执行验证功能。

谁能解释一下这个密码匹配指令？

2 个答案: