Question

我想验证我的表单，以便输入的时间和日期不是过去的。

我目前有两个输入框，一个用于时间，一个用于日期。它们目前都使用ng-pattern进行验证。当这两个输入框都创建过去的日期时，如何显示错误（ng-invalid）？

注意：我可以进行实际的过去与未来的计算（使用momentjs），这是我不知道该怎么做的这些输入框的合并。据我所知，directive只能在一个元素上工作，而不是两个元素？

<input type="text" ng-model="startTime" ng-pattern="/^(?:\d|[01]\d|2[0-3]):[0-5]\d$/">
<input type="text" ng-model="startDate" ng-pattern="/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/">

Answer 1

查看scope.$watch，当任一值更改时，您可以使用它来在控制器中同时验证这两个元素。

Answer 2

看一下使用不同的输入类型，例如datetime。这会将startTime和startDate合并为1个startDateTime。然后，您将根据如何设置最大值和最小值来获得过去或未来的验证。

https://docs.angularjs.org/api/ng/input/input%5Bdatetime-local%5D

<input type="datetime-local" id="exampleInput" name="input" ng-model="startDateTime"
  placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />

Answer 3

这就是我最终想出的结果，它与模型的关系非常重要，但它并不是很好但是有效。

m.directive("futureDate", function () {
    return {
        require: "ngModel",
        scope: false,
        link: function (scope, element, attrs, ngModel) {

            ngModel.$validators.futureDate = function (modelValue) {
                var time = attrs["futureDate"] == "time" ? modelValue : scope.startTime;
                var date = attrs["futureDate"] == "date" ? modelValue : scope.startDate;

                var datetime = moment(date + "T" + time);

                return datetime > moment();
            }
        }
    }
});

用法：

<input type="text" ng-model="startTime" data-em-future-date="time">
<input type="text" ng-model="startDate" data-em-future-date="date">

验证时间是未来时间

3 个答案: