使用指令在ng-repeat中輸入的$ setValidity-AngularJS

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似乎一切正常！ 例如

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

                    }

                });

            }
        };