javascript - 基于选择的 Angular 动态验证

Question

我正在使用 ionic 框架和 angularJS 开发移动应用程序。现在我在进行动态验证时遇到了问题。

这是我的表单，我尝试在选择框更改时从 Controller 设置验证值，但它不起作用。

<form id="my-form" ng-submit="submit(form,request)" name="form" novalidate>
  <div ng-class="{'has-error':form.biller-name.$invalid}">
    <span>Biller</span>
    <select id="biller" name="biller-name" ng-model="request.biller" ng-change="getValidationAmount(request.biller)" required>
        <option value="">Choose biller name</option>
      <option value="BA">Biller A</option>
      <option value="BB">Biller B</option>
        <option value="BC">Biller C</option>
    </select>
    <div ng-show="form.biller-name.$invalid && form.biller-name.$dirty">
        <p ng-if="form.biller-name.$error.required">Biller name must be chosen</p>
    </div>
  </div>

  <div ng-class="{'has-error':form.amount.$invalid}">
    <span>Amount</span>
    <input name="amount" ng-model="request.amount" type="number" ui-number-mask="2" max="{{billerVal.maxAmount}}" min="{{billerVal.minAmount}}" required/>

    <div ng-show="form.amount.$invalid && form.amount.$dirty">
            <p ng-if="form.amount.$invalid">validation works</p>
    </div>
  </div>

  <div>
    <input value="Submit" id="login_btnSubmit" data-role="button"
    data-shadow="false" type="submit"/>
  </div>
</form>

我的JS，有两个功能。首先从数据库中获取数据，更新功能将在页面上进行更新验证。

$scope.getValidationAmount = function (data){

  //get data from db
  beneficiaryService.getAmountByBenefeciaryType(JSON.parse(data)).then(function(amount){

    var amountSplitLast2Character = amount.substr(amount.length - 2);
    var firstCharacter = amount.substr(0, (amount.length - amountSplitLast2Character.length));
    $scope.bill.amount = firstCharacter+'.'+amountSplitLast2Character;

    //will do update function
    $scope.update(JSON.parse(data).nickname);
  },function(data,opt,error){});
};

$scope.update = function(nickname) {

  var billerVal = {};

  //this code below just for get object biller by nickname
  for(var i in billerList) {
    if (billerList[i].nickname == nickname) {
      for(var j in billerEnumList) {
        if (billerEnumList[j].key == billerList[i].name) {
          billerVal = billerEnumList[j];
        }
      }
    }
  }

  billerVal.maxAmount = parseInt(billerVal.maxAmount); //will return a number of amount e.g 100
  billerVal.minAmount = parseInt(billerVal.minAmount); //will return a number of amount e.g 1
  $scope.billerVal = billerVal; //set validation value to html page
}

当我直接在 html 中对最小值和最大值的验证进行硬编码时，验证工作正常。但是，当我尝试像上面的代码一样使用动态验证时，验证将不起作用。

Answer 1

对于 this demo fiddle 中显示的这种特定情况，您可以使用简单的自定义验证指令作为解决方法 .

angular官方Github Repo中有相关问题

app.directive('ngMin', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMin, function () {
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var minValidator = function (value) {
                var min = scope.$eval(attr.ngMin) || 0;
                if (!isEmpty(value) && value < min) {
                    ctrl.$setValidity('ngMin', false);
                    return undefined;
                } else {
                    ctrl.$setValidity('ngMin', true);
                    return value;
                }
            };

            ctrl.$parsers.push(minValidator);
            ctrl.$formatters.push(minValidator);
        }
    };
});

app.directive('ngMax', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMax, function () {
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var maxValidator = function (value) {
                var max = scope.$eval(attr.ngMax) || Infinity;
                if (!isEmpty(value) && value > max) {
                    ctrl.$setValidity('ngMax', false);
                    return undefined;
                } else {
                    ctrl.$setValidity('ngMax', true);
                    return value;
                }
            };

            ctrl.$parsers.push(maxValidator);
            ctrl.$formatters.push(maxValidator);
        }
    };
});

希望这对您有所帮助。