angularjs – 即使日期有效,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-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>

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

解决方法

相关推荐