Menu
<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 populate the data using the model I am getting an red line underneath the datepicker input box. the date is a valid one but I am not sure why its showing so. Please refer the screenshot attached for more reference. Did anyone face this issue ? Your suggestions are highly appreciated.
532
First check if you have ngMessages injected in your module, second ng-messages needs a form (in your case named 'Form' in my snippet 'myForm') and last you must check if your ng-model has a controller or something where you have the data. You need a valid form for md-is-error too.
Sorry for my english skills i can't explain you properly your mistakes but you can check my snippet.
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
