ngModel date validation possible?

[sujithtomy]

Hi,

Is there any way to add date validation?
When I change dropdown day, month, year. following ng-combo-date-picker ng-valid or ng-pristine doesn't get changed!.

<ng-combo-date-picker ng-model="basic" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">

I've added the following block for validating date entered. is this the right way to do so?

link: function (scope, element, attrs, ctrl) {
            // Initialize variables.
            var jqLite = angular.element;
            var children = jqLite(element[0]).children();
            var order = scope.ngOrder.split('');

            // Add attributes.
            if (scope.ngAttrsDate != null) jqLite(children[0]).attr(scope.ngAttrsDate);
            if (scope.ngAttrsMonth != null) jqLite(children[1]).attr(scope.ngAttrsMonth);
            if (scope.ngAttrsYear != null) jqLite(children[2]).attr(scope.ngAttrsYear);

            // Reorder elements.
            for (var i = 0; i < order.length; i++) {
                if (order[i] == 'd') jqLite(element[0]).append(children[0]);
                if (order[i] == 'm') jqLite(element[0]).append(children[1]);
                if (order[i] == 'y') jqLite(element[0]).append(children[2]);
            }

            ctrl.$setValidity('incompleteDateOfBirth', true);

            function validateDay() {                
                var valid = !(scope.date == null) && (scope.month > 0 || scope.year > 0);
                ctrl.$setValidity('incompleteDateOfBirth', valid);
            };

            function validateMonth() {
                var valid = !(scope.month == null) && (scope.date > 0 || scope.year > 0);
                ctrl.$setValidity('incompleteDateOfBirth', valid);
            };

            function validateYear() {
                var valid = !(scope.year == null) && (scope.date > 0 || scope.month > 0);
                ctrl.$setValidity('incompleteDateOfBirth', valid);
            };            

            scope.$watch('date', validateDay);
            scope.$watch('month', validateMonth);
            scope.$watch('year', validateYear);

Thank you very much

[jfmdev]

Hi sujithtomy,

Unfortunately, the directive is not as form friendly as I would like to (although it's a good suggestion), so the CSS classes ng-* are not updated in the directive, they are only updated in their inner <select> elements.

I have, however, just made a new release (v1.2.5) that will allow you to get access to the properties $valid and $pristine of each <select> element: you just need to define the attribute name for each combo box, by using the attributes the attributes ng-attrs-date, ng-attrs-month and ng-attrs-year.

<style>
    select.ng-pristine { color: red; }
    select.ng-dirty { color: green; }
</style>
<form name="myForm" novalidate>
    <ng-combo-date-picker ng-model="someDate" ng-attrs-date='{"name": "myDate", "required": true}' ng-attrs-month='{"name": "myMonth", "required": true}' ng-attrs-year='{"name": "myYear", "required": true}'></ng-combo-date-picker>
    
    <p>Form is valid: <strong>{{ myForm.$invalid? 'No' : 'Yes' }}</strong></p>
    <table>
        <tr>
            <th>Field</th>
            <th>Pristine</th>
            <th>Dirty</th>
        </tr>
        <tr>
            <td>Date</td>
            <td>{{ myForm.myDate.$pristine? 'Yes' : 'No' }}</td>
            <td>{{ myForm.myDate.$dirty? 'Yes' : 'No' }}</td>
        </tr>
        <tr>
            <td>Month</td>
            <td>{{ myForm.myMonth.$pristine? 'Yes' : 'No' }}</td>
            <td>{{ myForm.myMonth.$dirty? 'Yes' : 'No' }}</td>
        </tr>
        <tr>
            <td>Year</td>
            <td>{{ myForm.myYear.$pristine? 'Yes' : 'No' }}</td>
            <td>{{ myForm.myYear.$dirty? 'Yes' : 'No' }}</td>
        </tr>
    </table>
</form>

[jfmdev]

Hi sujithtomy,

I have released a new version of the library (v1.3.0) which implements date validation.

Just add the attribute ngRequired (set to true) and the classes ng-dirty, ng-pristine, ng-valid and ng-invalid will be correctly updated.