Question

我减少了我的代码以使事情比我的实际问题更简单，但我有一个动态表单，用户从下拉列表中选择一个值（例如，他们拥有的子项数），我们创建正确的子数表格供用户完成。您将在我的代码中看到这是使用一个名为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);
                        }

                    }
                });    
            }
        };
    }]);

提前致谢，如果我的措辞不好，我很抱歉。如果您希望我进一步解释，请说出来。

Answer 1

我想我有答案......

如果我将ngModel添加到指令中，就像这样......

require: 'ngModel',
link: function (scope, element, attrs, ngModel)

然后使用ngModel我的$ setValidity似乎一切正常！ E.g。

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

                    }

                });

            }
        };

ng-repeat using输入中的$ setValidity使用指令 - AngularJS

1 个答案: