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日期选择器和验证

回答

相关问题