AngularJS 中的日期验证答案

【问题标题】：Date validation in AngularJSAngularJS 中的日期验证
【发布时间】：2017-01-25 21:24:51
【问题描述】：

我不能在我用 angularjs 构建的表单中允许未来的日期

这是我的 HTML：

<div ngCloak ng-app="laurelMoney" ng-controller="myCtrl">
  <form name="userForm">
    <div class="form-group">
      <input type='date' id="trandate" class="form-control" ng-model="trandate" required ng-class="{ 'has-error' : userForm.trandate.$error }" />
      <p ng-show="userForm.trandate.$error" class="help-block">Transaction can't be in future</p>
    </div>

    <a href="#" class="btn btn-primary btn-sm btn-block" ng-click="submitForm()" type="submit">Add Transaction</a>
  </form>

我的javascript是Ñ

angular.module('laurelMoney', [])
  .controller('myCtrl', function($scope) {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1;
    var yyyy = today.getFullYear();
    if (dd < 10) {
      dd = '0' + dd
    }
    if (mm < 10) {
      mm = '0' + mm
    }
    today = yyyy + '-' + mm + '-' + dd;
    document.getElementById("trandate").setAttribute("max", today);
    $scope.submitForm = function() {

      if ($scope.userForm.$valid) {
        alert('our form is amazing');
      } else {
        console.log("Error");
      }

    };
  });

当日历弹出时，这工作正常。未来的日期都被禁用。但我可以在日期输入框中手动将其更改为未来日期。

系统也允许提交未来的日期。这个怎么办？？

Plunker

谢谢。

【问题讨论】：

标签： javascript angularjs angularjs-validation

【解决方案1】：

好吧，根据我从您的问题中可以理解的情况，您只是试图抛出错误消息或不允许用户选择未来的日期，对吗？所以，给你：

注意事项：

您在 plunker 中的 Angular 版本已完全过时，因此可能无法按您的预期工作；
ngCloak 应该是ng-cloak；
您应该在您的input 中添加名称 attribute 来验证它；
另外，您可以使用ngSubmit 代替ng-click 提交表单。
正如 cmets 中所指出的，如果 form 是 invalid，您可以禁用 button，而不是在 controller 中进行此检查；
最后，要将日期设置为最大日期（在您的情况下今天），您只需执行以下操作：$scope.max = new Date() 并在您的视图中调用它；

这是一个完整的例子：

(function() {
  'use strict';

  angular
    .module('laurelMoney', [])
    .controller('myCtrl', myCtrl);

  myCtrl.$inject = ['$scope'];

  function myCtrl($scope) {
    $scope.max = new Date();
  }
})();

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>

<body ng-app="laurelMoney">
  <div ng-cloak ng-controller="myCtrl">
    <form name="userForm" novalidate ng-submit="submitForm()">
      <div class="form-group" ng-class="{ 'has-error' : userForm.trandate.$error }">
        <input type="date" name="trandate" class="form-control" required max="{{max}}" ng-model="trandate">
        <p ng-if="userForm.trandate.$touched && userForm.trandate.$error.required" class="help-block">Transaction is required</p>
        <p ng-if="userForm.trandate.$error.date" class="help-block">Transaction should be a valid date</p>
        <p ng-if="userForm.trandate.$error.max" class="help-block">Transaction can't be in future</p>
      </div>
      <button type="submit" class="btn btn-primary btn-sm btn-block" ng-disabled="userForm.$invalid">Add Transaction</button>
    </form>
    <pre ng-bind="userForm.trandate.$error | json"></pre>
  </div>
</body>

</html>

【讨论】：

这是一个很好的代码示例，但您的ng-class 不是不必要的吗？很确定你会在 .ng-invalid.ng-invalid-max 无效时将其应用于 input[date]。
嗯，是的，它只是 OP 的 plunker 的副本。
啊，对。另外，OP，您可能应该拥有ng-submit='userForm.$valid && submitForm()'，而不是在控制器中检查表单的有效性。只是将所有东西都放在一个地方。此外，您可以通过 <div ng-if='userForm.$invalid && userForm.$submitted'> 阻止显示验证消息，而不是将错误记录到控制台（您正在这样做）。
@DanPantry，很好，我更正了ngClass 部分，还使用ng-disabled 更改了按钮的状态。