md-datepicker mostra la sottolineatura rossa anche se la data è valida

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

Sto usando md-datepicker. Quando compilo i dati usando il modello, ottengo una linea rossa sotto la casella di input di Datepicker. la data è valida ma non sono sicuro del perché sia così. Si prega di fare riferimento allo screenshot allegato per ulteriori riferimenti. Qualcuno ha affrontato questo problema? I tuoi suggerimenti sono molto apprezzati. md-datepicker mostra la sottolineatura rossa anche se la data è valida

fonte

2016-01-12 Sharan Ainapurapu

Possiamo avere un plnkr? –

Avvolgi il DatePicker con md-input-container. –

In primo luogo verificare se si dispone di ngMessages iniettati nel vostro modulo, secondo NG-messaggi ha bisogno di un modulo (nel tuo caso chiamato 'Form' nel mio frammento di 'myForm') e l'ultima deve controllare se il vostro ng-modello ha un controller o qualcosa in cui si hanno i dati. Hai bisogno di un modulo valido anche per md-is-error.

Scusate le mie abilità in inglese, non posso spiegarvi correttamente i vostri errori ma potete controllare il mio frammento.

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

fonte

2016-01-12 19:36:44

questo codice non funziona per me .. non so cosa mi manca –

Hai veramente bisogno di un modulo per accedere agli errori di md-datepicker? Io uso ng-change per usare i miei valori direttamente nel controller, e non ho davvero bisogno di un modulo per questo. – mcv

md-datepicker mostra la sottolineatura rossa anche se la data è valida

risposta

Problemi correlati