ui-bootstrap日期選擇器和驗證

我設置瞭如下所示的日期選擇器。如果我輸入了無效的日期，我總是看到「可用日期是必需的」消息，而不是「輸入有效的日期」消息。有人看到這裏有什麼問題嗎？ui-bootstrap日期選擇器和驗證

<div class="form-group" ng-class="{'has-error': productForm.inputAvailabilityDate.$invalid && productForm.inputAvailabilityDate.$dirty}"> 
    <label class="col-md-2 control-label" for="inputAvailabilityDate">Availability</label> 
    <div class="col-md-4"> 
     <div class="input-group"> 
      <input type="date" 
       id="inputAvailabilityDate" 
       name="inputAvailabilityDate" 
       class="form-control" 
       data-datepicker-popup="MM/dd/yyyy" 
       ng-model="vm.product.releaseDate" 
       data-is-open="vm.opened" 
       data-show-weeks="false" 
       required /> 
      <span class="input-group-btn"> 
       <button type="button" 
        class="btn btn-default" 
        ng-click="vm.open($event)"> 
        <i class="glyphicon glyphicon-calendar"></i> 
       </button> 
      </span> 
     </div> 
    </div> 
    <span class="help-block text-danger" ng-show="productForm.inputAvailabilityDate.$invalid && productForm.inputAvailabilityDate.$dirty"> 
     <span ng-show="productForm.inputAvailabilityDate.$error.required"> 
      Availability Date is required 
     </span> 
     <span class="help-block text-danger" ng-show="!productForm.inputAvailabilityDate.$error.required"> 
      Enter a valid date. 
     </span> 
    </span> 
</div>

謝謝！

來源

2014-07-08 DeborahK

我可以看到1個的問題。所需的不是驗證輸入。它只是檢查是否有值，而不是哪個值。你也可以編寫'ng-show =「productForm.inputAvailabilityDate。$ valid'，你應該得到同樣的行爲。我看到的另一個問題是，如果你真的使用twittet-bootstrap，那麼你的模型不知道這個值有你應該使用ui-bootstrap來代替，所以框架組件會爲你更新模型，使用普通的JavaScript永遠不會改變。 – Sebastian

好的我錯了:-)，但是我的答案告訴你什麼是問題。 – Sebastian

正如你可以在這個小plnkr例子中看到的那樣，你可以not show "Enter a valid date"，因爲你的表達無效！

必須有productForm.inputAvailabilityDate.$invalid && productForm.inputAvailabilityDate.$dirty && !productForm.inputAvailabilityDate.$error.required == true才能顯示消息。但是，如果日期無效，則模型設置爲未定義！那是因爲如果日期無效，日期選擇器不設置日期。

在這裏你可以看到一個例子how the "Enter a valid date" message will show。

代碼隱藏：

var app = angular.module('app', ['ui.bootstrap']); 
app.controller('ctrl', function ($scope, $timeout) { 
    $scope.vm = { 
    product: { 
     releaseDate: new Date() 
    } 
    }; 

    $scope.open = function($event) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 
    $scope.opened = true; 
    }; 
});

的HTML代碼：

<head> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 
    <script src="script.js"></script> 
</head> 

<body ng-app="app" ng-controller="ctrl"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <form name="productForm" novalidate> 
      <div class="form-horizontal"> 
      <span class="input-group"> 
     <input type="date" id="inputAvailabilityDate" name="inputAvailabilityDate" 
     class="form-control" data-datepicker-popup="MM/dd/yyyy" 
     ng-model="vm.product.releaseDate" data-is-open="opened" 
     data-show-weeks="false" required /> 

      <span class="input-group-btn"> 
      <button class="btn btn-default" ng-click="open($event)"> 
     <i class="glyphicon glyphicon-time"></i> 
     </button> 

     </span> 

      </span> 
      </div> 
      <span class="help-block text-danger" ng-show="productForm.inputAvailabilityDate.$invalid && 
    productForm.inputAvailabilityDate.$dirty"> 
       <span ng-show="productForm.inputAvailabilityDate.$error.required"> 
        Availability Date is required 
       </span> 
      <span class="help-block text-danger" ng-show="productForm.inputAvailabilityDate.$invalid && 
    productForm.inputAvailabilityDate.$dirty"> 
        Enter a valid date. 
       </span> 
      </span> 

     </form> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     vm: {{vm|json}} 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     productForm: {{productForm|json}} 
     <br>productForm.inputAvailabilityDate.$valid: {{productForm.inputAvailabilityDate.$valid}} 
     <br>productForm.inputAvailabilityDate.$error: {{productForm.inputAvailabilityDate.$error|json}} 
     <br>productForm.inputAvailabilityDate.$dirty: {{productForm.inputAvailabilityDate.$dirty}} 
     <br>productForm.inputAvailabilityDate.$invalid: {{productForm.inputAvailabilityDate.$invalid}} 
     </div> 
    </div> 
    </div> 
</body> 

</html>

來源

2014-09-30 09:57:21 Sebastian

ui-bootstrap日期選擇器和驗證

回答

相關問題