日付が有効であってもmd-datepickerは赤い下線を表示します

<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を使用しています。モデルを使用してデータを入力すると、datepicker入力ボックスの下に赤い線が表示されます。日付は有効なものですが、その理由をよく分かりません。詳しくは添付のスクリーンショットを参照してください。誰もこの問題に直面しましたか？あなたの提案は高く評価されます。あなたは、モジュール内に注入ngMessages、二NG-のメッセージを持っている場合日付が有効であってもmd-datepickerは赤い下線を表示します

出典

2016-01-12 Sharan Ainapurapu

我々はplnkrを持つことができますか？ –

md-input-containerでdatepickerをラップします。 –

最初のチェックは、（私のスニペットで「フォーム」という名前の、あなたのケースで「あるmyForm」）形式を必要とし、あなたのNG-モデルが持っているかどうかをチェックしなければならない最後あなたがデータを持っているコントローラまたは何か。 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>

出典

2016-01-12 19:36:44

このコードは私のために働いていない..私は何が足りないのか分からない –

md-datepickerのエラーにアクセスするにはフォームが本当に必要ですか？私はコントローラで直接値を使用するためにng-changeを使用しますが、実際にはそのためのフォームは必要ありません。 – mcv

日付が有効であってもmd-datepickerは赤い下線を表示します

答えて

関連する問題