基于选择的角度动态验证

Angular dynamic validation based on selection

本文关键字:动态 验证 于选择 选择      更新时间:2023-09-26

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

这是我的表单,当选择框更改时,我试图从控制器设置验证值,但它不起作用。

<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中对最小值和最大值进行硬编码验证时,验证工作正常。但是,当我尝试像上面的代码一样使用动态验证时,验证将不起作用。

您可以使用一个简单的自定义验证指令作为解决方法来解决此演示中显示的特定条件。

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

希望这能有所帮助。

您不需要使用插值语法来指示视图中的最小和最大长度。您可以直接使用$scope属性。

<input name="amount" ng-model="request.amount" type="number" ui-number-mask="2" max="billerVal.maxAmount" min="billerVal.minAmount" required/>