基于选择的角度动态验证
Angular dynamic validation based on selection
我正在开发一个带有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/>
相关文章:
- Php,Javascript-动态表单id's和动态验证
- 将动态验证文本添加到自定义jQuery验证规则中
- 基于选择的角度动态验证
- 使用ng模式Angularjs进行动态验证
- 动态验证输入框是否有空格或是否为空
- 在 Javascript 中动态验证值列表
- j查询动态验证单选按钮选择
- 尝试使用 jQuery - 自定义函数动态验证字段
- 动态验证-只需一个附加
- 动态验证文本字段中的问题
- Jquery动态验证字段
- 动态验证和格式化邮政编码
- javascript表单的动态验证
- 动态验证密码规则
- 对输入进行动态验证
- 我可以使用HTML5 API根据允许的值列表动态验证表单字段值吗?
- Asp.net MVC日期时间动态验证客户端日期格式
- 使用PHP实现HTML表单的动态验证
- 客户端范围动态验证
- 动态验证表单数据