谁能解释一下这个密码匹配指令? [英] Can anyone explain me this password match directive?

问题描述

谁能解释一下这段代码的工作原理.

Can anyone explain me on how this piece of code works.

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">

指令代码

'使用严格';

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);
        })
      }
    };
  });

谁能解释一下下面的问题.

下面的代码在指令中有什么作用?.我真的不明白这个密码匹配指令是如何工作的?

What does the below code do in the directive?. I don't really understand on how this password match directive works?.

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

推荐答案

<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>

在

中，您可以通过检查表单的标志(例如$invalid或$error(https://docs.angularjs.org/guide/forms(自定义验证))

in <form>, you can do angular validation by checking a form's flags such as $invalid or $error (https://docs.angularjs.org/guide/forms (Custom Validation))

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

This is useful for simple validation such as:

• 必填字段(将 required 添加到 )或
• 最少数量的字符(添加 min='5')

• a required field (adding required to <input>) or
• a minimum # of characters (adding min='5')

和 password_form.$invalid 将在任一要求失败时自动设置.

and password_form.$invalid will automatically be set if either requirements fail.

validate-equals 是一个指令，用于在两个密码字段中手动设置表单的 $invalid(或 $dirty?)标志不匹配.

The validate-equals is a directive to set the form's $invalid (or $dirty?) flag manually if the two password fields don't match.

$setViewValue 被调用来重新评估表单的有效性.

$setViewValue is called to re-evaluated the form's validity.

每次输入更改(调用 $setViewValue)或绑定模型更改时，都会执行验证函数.

The validation functions are executed every time an input is changed ($setViewValue is called) or whenever the bound model changes.

这篇关于谁能解释一下这个密码匹配指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！