[英]$setValidity on input within ng-repeat using directive - AngularJS
我已经减少了代码,使事情比实际问题更简单,但是我有一个动态表单,用户可以从下拉列表中选择一个值(例如,他们所拥有的孩子数),然后为该表单创建正确数量的子表单用户完成。 您会在我的代码中看到这是使用称为get number的函数返回的,我从另一个表单项传递了一个值)。 现在,我在表单中使用HTML5日期输入,尽管我可以设置最小值和最大值,但不能阻止用户手动输入无效的日期。 因此,我创建了一个指令来比较触发模糊事件时的值。 一切都很酷,但是我不确定如何在指令中将特定的html输入设置为无效。 我尝试将$setValidity('required', false)
与scope
和ctrl
但似乎无济于事...这是我的代码示例
这是视图...
<div data-ng-repeat="child in getNumber(children.number.value) track by $index">
<div class="row">
<div class="col-xs-12">
<input type="text"
data-ng-model="children.child[$index].firstName"
name="childName{{$index}}">
</div>
<div class="col-xs-12">
<input type="date" name="child{{$index}}Dob"
data-ng-model="children.child[$index].dob"
max="2015-10-10"
min="2001-01-01"
data-date-input-validator>
</div>
</div>
</div>
现在这是我的指令代码...条件起作用...我只是无法在指令中将输入设置为无效,我该怎么办?
.directive('dateInputValidator', [function () {
'use strict';
return{
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('blur', function () {
// the attribute is just a string... so we need to convert to date...
var childDate = element[0].value.split('-');
childDate = new Date(childDate[0], childDate[1], childDate[2]);
// check if we have a min and a max value
if(attrs.min) {
var minDate = attrs.min.split('-');
minDate = new Date(minDate[0], minDate[1], minDate[2]);
if(childDate < minDate) {
console.log('tooSmall');
// need to do this $setValidity('required', false);
}
}
if(attrs.max) {
// the attribute is just a string... so we need to convert to date...
var maxDate = attrs.max.split('-');
maxDate = new Date(maxDate[0], maxDate[1], maxDate[2]);
if(childDate > maxDate) {
console.log('tooBig');
// need to do this $setValidity('required', false);
}
}
});
}
};
}]);
在此先感谢您,如果我的措辞不正确,请对不起。 如果您希望我进一步解释,请这样说。
我想我有一个答案。
如果我像这样将ngModel添加到指令中...
require: 'ngModel',
link: function (scope, element, attrs, ngModel)
然后我使用ngModel $ setValidity似乎一切正常! 例如
if(childDate > maxDate) {
console.log('tooBig');
ngModel.$setValidity('required', false);
}
这是完整的东西...
.directive('dateInputValidator', [function () {
'use strict';
return{
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
element.bind('blur', function () {
// the attribute is just a string... so we need to convert to date...
var childDate = element[0].value.split('-');
childDate = new Date(childDate[0], childDate[1], childDate[2]);
// check if we have a min and a max value
if(attrs.min) {
var minDate = attrs.min.split('-');
minDate = new Date(minDate[0], minDate[1], minDate[2]);
if(childDate < minDate) {
ngModel.$setValidity('required', false);
}
}
if(attrs.max) {
// the attribute is just a string... so we need to convert to date...
var maxDate = attrs.max.split('-');
maxDate = new Date(maxDate[0], maxDate[1], maxDate[2]);
if(childDate > maxDate) {
ngModel.$setValidity('required', false);
}
}
});
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.