即使日期有效,md-datepicker也会显示红色下划线

Question

即使日期有效,md-datepicker也会显示红色下划线

Sha*_*apu 6 validation datepicker angularjs angular-material

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

Run Code Online (Sandbox Code Playgroud)

我正在使用md-datepicker.当我使用模型填充数据时,我在datepicker输入框下面得到一条红线.这个日期是有效的,但我不确定为什么这样做.请参阅附带的屏幕截图以获取更多参考.有没有人面对这个问题？您的建议非常感谢.

Answer 1

Iva*_*ado 2

首先检查您的模块中是否注入了 ngMessages，第二个 ng-messages 需要一个表单（在您的情况下，在我的代码片段“myForm”中名为“Form”），最后您必须检查您的 ng-model 是否有一个控制器或您需要的东西有数据。您还需要一个有效的 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，8 月前
查看次数：	5361 次
最近记录：	8 年，6 月前