在ng-repeat中使用指令设置$setValidity

$setValidity on input within ng-repeat using directive - AngularJS

本文关键字:设置 setValidity 指令 ng-repeat      更新时间:2023-09-26

我已经减少了我的代码,使事情比我的实际问题更简单,但我有一个动态表单,其中用户从下拉菜单中选择一个值(例如,他们有孩子的数量),我们为用户创建正确数量的子表单来完成。您将在我的代码中看到,这是使用名为get number的函数返回的,并且我传递了来自另一个表单项的值。现在我在表单中使用HTML5日期输入,虽然我可以设置最小值和最大值,但我无法阻止用户手动输入无效日期。所以我创建了一个指令来比较模糊事件触发时的值。一切都很酷,但我不确定如何在我的指令中设置特定的html输入无效。我试过使用$setValidity('required', false)scopectrl,但似乎没有任何工作…下面是我的代码示例

这是视图

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

,然后我$setValidity使用ngModel一切似乎工作!例如

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