The case is, I am trying to create a datepicker field that detects if the input is an invalid date(The months and days validity is also included like 2015-02-30 is invalid because there is no February 30) and is also required. So, I created a custom form validity via directive to detect the invalid date. The custom validity is working fine, however, seems like the $error.required and $invalid does not sync since I have used "ngModel.$validators.available".
Here is a working plunker: http://plnkr.co/edit/NuDGB64IetpcsaVB03T7?p=preview You will notice in plunker that the $error.required is **true** but the $invalid is Just **blank** but turns to true when you input an invalid date and false if the date input is valid. In short, the form is not considered invalid when the input is blank which is very needed for my ng-class The code is: <!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css";> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.css";> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js";></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js";></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js";></script> </head> <body> <form ng-controller="myCtrl" name="bioManagementForm" novalidate> Degree: <br /> <p>Invalid Input: -- {{ bioManagementForm.in_company_since.$invalid }}</p> <p>Required -- {{ bioManagementForm.in_company_since.$error.required }}</p> <input class="form-control input-form since" ng-class="{ 'error': bioManagementForm.in_company_since.$invalid && notifications }" type="text" id="in_company_since" name="in_company_since" ng-model="input.in_company_since" ng-required="true" datepicker> </form> </body> <script> // Code goes here var myApp = angular.module('myApp', []); myApp.controller('myCtrl', function($scope){ }); myApp.directive('datepicker', function() { return { restrict: 'A', require : 'ngModel', link : function (scope, element, attrs, ngModel) { console.log(ngModel); datePatternCounter = []; // $(function(){ if(!scope.viewOnly){ element.attr("placeholder", "YYYY-MM-DD"); } element.datepicker({ changeYear: true, changeMonth: true, yearRange: "1900:+50", showButtonPanel: true, closeText: 'Clear', dateFormat:'yy-mm-dd', onSelect:function (date) { ngModel.$setViewValue(date); scope.$apply(); }, // Custom function that clears the date value of the model when the "Clear" button is clicked on the datepicker onClose: function(date){ var event = arguments.callee.caller.caller.arguments[0]; if(Number(date) && date.length == 8){ // alert("dean"); year = date.slice(0, 4); month = date.slice(4, 6); day = date.slice(6, 8); newDate = year+"-"+month+"-"+day; ngModel.$setViewValue(newDate); ngModel.$render(); }else{ // alert("armada"); // Code if with dash // Do nothing } // ngModel.$error.datePattern if(event['type'] == 'click'){ ngModel.$setViewValue(undefined); ngModel.$render(); } }, beforeShow: function (e, t) { id = document.querySelector( '#ui-datepicker-div' ); angular.element(id).addClass('HideTodayButton'); if(element.hasClass('birth_date')){ element.datepicker("option", "maxDate", 0); } }, }); // }); // START Syntax to check if the date is valid or not in real time ngModel.$validators.available = function (modelValue, viewValue) { if(modelValue){ var check = modelValue.split('-'); var y = parseInt(check[0], 10); var m = parseInt(check[1], 10); var d = parseInt(check[2], 10); var date = new Date(y,m-1,d); if (date.getFullYear() == y && date.getMonth() + 1 == m && date.getDate() == d) { check = true; } else { check = false; name = ngModel.$name; if(datePatternCounter.indexOf(name) == -1){ datePatternCounter.push(name); element.parent().siblings("span.errors").append('<span class="invalid-date" ng-if="'+ngModel.$error.available+'"> * Invalid Date <br /></span>'); } } } return check; } // END Syntax to check if the date is valid or not } } }); </script> </html> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
