angularjs - md-datepicker दिखाता लाल नीचे रेखांकित हालांकि दिनांक वैध है



validation angular-material (1)

पहले जांचें कि आपके पास अपने मॉड्यूल में इंजेक्ट किए गए एनजीएमसेज हैं, दूसरे एनजी-मैसेजेस को एक फॉर्म की ज़रूरत है (मेरे मामले में 'स्नैपेट' myForm 'में नाम' फॉर्म) और आपको यह देखना होगा कि क्या आपके एनजी-मॉडल में एक नियंत्रक है या कोई ऐसा स्थान है जहां आप डेटा है आपको md-is-error के लिए भी एक वैध फ़ॉर्म की आवश्यकता है

अपने अंग्रेजी कौशल के लिए क्षमा करें, मैं आपको अपनी गलतियों को ठीक से नहीं समझा सकता, लेकिन आप मेरे स्निपेट की जांच कर सकते हैं।

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

<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);
}

मैं md-datepicker का उपयोग कर रहा हूँ जब मैं मॉडल का उपयोग करते हुए डेटा को पॉप्यूलेट करता हूं, तो मुझे डेटपिकर इनपुट बॉक्स के नीचे एक लाल रेखा मिलती है I तिथि एक मान्य है, लेकिन मुझे यकीन नहीं है कि इसका दिखाया क्यों है अधिक संदर्भ के लिए संलग्न स्क्रीनशॉट को देखें। क्या किसी ने इस मुद्दे का सामना किया? आपके सुझावों की अत्यधिक सराहना की जाती है