md-datepicker shows up red underline even though the date is valid

Question

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

Wrap the datepicker with md-input-container. – Saurabh Kalantri Sep 27 '17 at 01:52 — Saurabh Kalantri, Sep 27 '17 at 01:52

score 2 · Answer 1 · edited Mar 03 '17 at 06:21

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>

this code is not working for me.. i dont know what I'm missing — Naila Akbar, Aug 03 '16 at 12:27
Do you really need a form to access md-datepicker's errors? I use ng-change to use my values directly in the controller, and I don't really need a form for that. — mcv, Dec 09 '16 at 16:20

md-datepicker shows up red underline even though the date is valid

1 Answers1