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指令。有什么想法吗？也许我会为此创建自己的指令？不幸的是，我不是Angular专家。。。应该是这样的：

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

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

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>

这真的很灵活。你可以在我的验证检查中使用任何你想要的东西，例如，确保选中了一个复选框，或者任何更复杂的表达式都是true。

希望这不仅能帮助我自己…：-）

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

这种方法应该很有魅力。

我为您创建了JSFiddle。

Answer 3

请参阅下面的演示

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>