Angularjs ui引导日期选择器和验证_Angularjs_Twitter Bootstrap

Angularjs ui引导日期选择器和验证

angularjs twitter-bootstrap

Angularjs ui引导日期选择器和验证,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我设置了一个日期选择器，如下所示。如果我输入了无效的日期，我总是会看到“Availability date is required”消息，而不是“输入有效日期”消息。有人看到这里出了什么问题吗 <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//ajax.googleapis.c

我设置了一个日期选择器，如下所示。如果我输入了无效的日期，我总是会看到“Availability date is required”消息，而不是“输入有效日期”消息。有人看到这里出了什么问题吗

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


可利用性
提供日期是必需的
输入有效日期。

谢谢

正如您在这个小plnkr示例中看到的，您可以，因为您的表达式无效

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

必须存在

productForm.inputAvailabilityDate.$invalid&&productForm.inputAvailabilityDate.$dirty&&！productForm.inputAvailabilityDate.$error.required

==true以显示消息。但是如果有一个无效的日期，模型将被设置为未定义！这是因为如果日期无效，datepicker不会设置日期

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

这里你可以看到一个例子

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

代码隐藏：

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;
  };
});

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

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>


提供日期是必需的
输入有效日期。
vm:{{vm | json}}
productForm:{{productForm | json}}

productForm.inputAvailabilityDate.$valid:{{productForm.inputAvailabilityDate.$valid}

productForm.inputAvailabilityDate.$error:{{{productForm.inputAvailabilityDate.$error | json}}

productForm.inputAvailabilityDate.$dirty:{{productForm.inputAvailabilityDate.$dirty}

productForm.inputAvailabilityDate.$invalid:{{productForm.inputAvailabilityDate.$invalid}

我发现一个问题。必需的不是验证输入。它只是检查是否有值，而不是哪个值。您还可以编写

ng show=“productForm.inputAvailabilityDate.$valid

您应该会得到相同的行为。我看到的另一个问题是，如果您真的使用twittet引导，那么您的模型不知道该值已经更改。您应该改用ui引导，这样框架组件就会为您更新模型。通过使用普通JavaScript，required永远不会改变。好吧，我错了：-），但我的答案告诉你问题出在哪里。