Geek Answers Handbook

Md-datepicker shows a red highlight, even if the date is valid

<md-datepicker name="startDate" md-is-error="data.isInvalid(Form.startDate)" ng-model="data.startDate" md-placeholder="Start date" required flex="100" flex-lg="50"></md-datepicker> <div ng-messages="Form.startDate.$error" ng-if="data.isInvalid(Form.startDate)"> <div ng-message="valid">The entered value is not a date!</div> <div ng-message="required">This date is required!</div> <div ng-message="mindate">Date is too early!</div> <div ng-message="maxdate">Date is too late!</div> </div> isInvalid : function(formObject) { return formObject.$invalid && (formObject.$$parentForm.$submitted || formObject.$touched || formObject.$dirty); }

I am using md-datepicker. When I fill in the data using the model, I get a red line below the date input field. the date is valid, but I'm not sure why this is so. Please refer to the screenshot attached for more information. Has anyone encountered this problem? Your suggestions are highly appreciated. enter image description here

+6
source share
1 answer

First check if your module has ngMessages, in the second ng message you need a form (in your case with the name "Form" in my myForm fragment), and the last time you should check if your ng model has a controller or something, where do you have the data. You also need a valid form for md-is-error.

Sorry for my knowledge of English, I can’t explain your mistakes correctly, but you can check my fragment.

 <html> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <style type="text/css"> .validation-messages { font-size: 11px; color: darkred; margin: 10px 0 0 25px; } </style> </head> <body ng-app="testApp" ng-controller="AppCtrl"> <form name="myForm"> <md-datepicker name="startDate" md-is-error="myForm.startDate.$invalid && myForm.$submitted" ng-model="startDate" md-placeholder="Start date" required flex="100" flex-lg="50"></md-datepicker> <div class="validation-messages" ng-messages="myForm.startDate.$error"> <div ng-message="valid">The entered value is not a date!</div> <div ng-message="required">This date is required!</div> <div ng-message="mindate">Date is too early!</div> <div ng-message="maxdate">Date is too late!</div> </div> </form> <script type="text/javascript"> var app = angular.module("testApp", ["ngMaterial","ngMessages"]) .controller('AppCtrl', function($scope) { $scope.startDate= null; //no date on page load }); </script> </body> </html>
+2
source

More articles:


All Articles