angularjs - Angular UI 日期选择器验证

Question

In this plunk我有一个 Angular UI 日期选择器和一条仅在日期有效时才显示的消息。问题在于，即使 form.$valid 为 true，该消息也始终会显示。请注意，如果您输入有效或无效日期，然后单击验证，系统将正确显示相应日期有效或无效的警报。

为什么即使 form.$valid 为 true，验证消息仍然显示？

Javascript

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller('ctl', function ($scope) {


    $scope.dtFrom = new Date ();

    $scope.config1 = {};
    $scope.config1.opened = false;
    $scope.open1 = function(event){
         event.preventDefault();
         event.stopPropagation();
         $scope.config1.opened = true;
    };

    $scope.validate = function(form){
        if (!form.$valid) {
           alert("Date invalid");
        }
        else {
           alert("Date valid");
        }
    }

});

HTML

<div ng-controller="ctl">
  <form name="form1" ng-submit="validate(form1)" novalidate>
      <p class="input-group" name="dtFrom" style="width:160px;margin-bottom:0px;">
          <input type="text" class="form-control" ng-model="dtFrom" 
               is-open="config1.opened"  uib-datepicker-popup="MM-dd-yyyy" 
               close-text="Close" />
           <span class="input-group-btn">
               <button type="button" class="btn btn-default" ng-click="open1($event)">
                  <i class="glyphicon glyphicon-calendar"></i>
               </button>
           </span>
      </p>
      <span ng-show="!form1.dtFrom.$valid">Invalid Date</span>
      <br/>
      <button type="submit">Validate</button>
  </form>
</div>

Answer 1

您应该为输入创建名称

 <input type="text" class="form-control" ng-model="dtFrom" 
                   is-open="config1.opened"  uib-datepicker-popup="MM-dd-yyyy" 
                   close-text="Close" name="date" />
      <span ng-show="!form1.date.$valid">Invalid Date</span>

这里是 plnkr

http://plnkr.co/edit/gc0Oefhok6Gjim66UG0K?p=preview