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

Question

I have reduced my code to make things simpler than my actual problem but I have a dynamic form, where the user selects a value from a dropdown (eg for the number of children they have) and we create the correct number of sub forms for the user to complete. You will see in my code this is returned using a function called get number and I pass the a value from another form item). Now I am using the HTML5 date input within my forms and although I can set min and max values I can't prevent the user from manually typing an invalid date. So I created a directive to compare the values when the blur event is fired. Everything is cool but I am unsure how I can set the specific html input to invalid within my directive. I have tried using $setValidity('required', false) with scope and ctrl but nothing seems to work... here is an example of my code

Here is the view...

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

Now here is my directive code... the conditions work... I just can't set the input to invalid within the directive, what should I do?

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

                    }
                });    
            }
        };
    }]);

Thanks in advance, and sorry if my wording is bad. If you wish for me to explain a little further please say so.

Answer 1

I think I have an answer....

if I add the ngModel to the directive like so...

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

and then I $setValidity using ngModel everything seems to work! Eg

if(childDate > maxDate) {
 console.log('tooBig');
 ngModel.$setValidity('required', false);
}

here's the full thing...

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

                    }

                });

            }
        };