AngularJS：如何设置基于自定义布尔值的有效性

Question

我想基于自定义布尔值设置表单元素的有效性。考虑下面的密码字段：

<input type="password" name="password" ng-model="user.password" required>
<input type="password" name="passwordRepeat" ng-model="user.passwordRepeat" required>

如果重复的密码与原始密码匹配，我想标记第二个输入字段有效。类似的东西：

<input type="password" name="passwordRepeat" ng-model="user.passwordRepeat" my-validation-check="user.passwordRepeat === user.password" required>

为此，我找不到任何角度指示。有什么想法吗？也许我可以为此制定自己的指令？不幸的是，我不是一个角度专家。。。应该是这样的：

angular.module('app').directive('myValidationCheck', function() {
    return {
        scope: true,
        require: 'ngModel',
        link: function(scope, elm, attrs, ngModel) {
            // eval and watch attrs.myValidationCheck
            // and use ngModel.$setValidity accordingly
        }
    };
});

谢谢

Answer 1

请看下面的演示

var app = angular.module('app', []);

app.directive('mcheck', function() {
  return {

    require: 'ngModel',
    link: function(scope, elm, attrs, ngModel) {

      scope.$watch(attrs.ngModel, function(value) {



        if (value == attrs.mcheck) {
          ngModel.$setValidity('notEquals', true);


        } else {

          ngModel.$setValidity('notEquals', false);

        }




      });

    }
  };
});


app.controller('fCtrl', function($scope) {



});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="fCtrl">
    <form novalidate name="login">
      <input type="text" name="password" ng-model="user.password" mcheck="{{user.passwordRepeat}}" required>



      <input type="text" name="passwordRepeat" ng-model="user.passwordRepeat" mcheck="{{user.password}}" required>
      <HR/>
      <span ng-show="login.password.$error.notEquals && login.passwordRepeat.$error.notEquals && login.$dirty">Passwords are not equal</span>
      <HR/>


    </form>
  </div>
</div>

Answer 2

你为什么需要特殊的指令？

为何不这样做：

<div ng-controller="MyCtrl">
  <form name="myForm" ng-submit="processForm()"> 
      <input type="password" ng-model="password" placeholder="password" required/>
      <input type="password" ng-model="repeatedPassword" placeholder="repeat password" required/>
      <input type="Submit" value="Submit" ng-disabled="passwordsMissmatched()"/>
      <span ng-show="passwordsMissmatched()">
          Password mismatched
      </span>
   </form>
</div>

还有你的JS：

function MyCtrl($scope) {
    $scope.passwordsMissmatched = function(){
        return $scope.password && $scope.repeatedPassword 
               && ($scope.password != $scope.repeatedPassword);
    }

    $scope.processForm = function(){
        if($scope.password == $scope.repeatedPassword){
            alert("Form processing..");
        }
    };
}

这种方法应该非常有效。

我已经为您创建了JSFIDLE。

Answer 3

我花了相当多的时间根据你下面的答案找到最好的答案（非常感谢！）。对我来说，诀窍很简单：

angular.module('myApp').directive('myValidationCheck', function() {
    return {
        scope: {
            myValidationCheck: '='
        },
        require: 'ngModel',
        link: function(scope, elm, attrs, ngModel) {

            scope.$watch('myValidationCheck', function(value) {
                ngModel.$setValidity('checkTrue', value ? true : false);
            });

        }
    };
});

对于

<input type="password" name="passwordRepeat" my-validation-check="user.password === user.passwordRepeat" ng-model="user.passwordRepeat" required>

这是非常灵活的。您可以在我的验证检查中使用任何您想要的内容，例如，确保选中复选框或任何更复杂的表达式为真。

希望这不仅仅对我有帮助…-）