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>

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

希望这不仅有助于我自己......： - ）

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

请参阅下面的演示

＆＃13;

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

＆＃13;

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

＆＃13;

AngularJS：如何根据自定义布尔值设置有效性

3 个答案: