Question

我设置了日期选择器，如下所示。如果我输入无效日期，我总是会看到“可用日期是必需的”消息，而不是“输入有效日期”消息。有人看到这里有什么问题吗？

<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>

谢谢！

Answer 1

正如您在这个小plnkr示例中所看到的，您可以not show "Enter a valid date"，因为您的表达式无效！

必须有productForm.inputAvailabilityDate.$invalid && productForm.inputAvailabilityDate.$dirty && !productForm.inputAvailabilityDate.$error.required == true才能显示消息。但是如果有一个无效的日期，模型将设置为undefined！那是因为如果日期无效，则datepicker不会设置日期。

您可以在此处查看示例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>

ui-bootstrap日期选择器和验证

1 个答案: