Question

阿罗哈。我有两个时间输入字段，开始+结束。我已经创建了自定义验证，以检查字段是否为空，有效时间和开始时间是否在结束时间之前。除以下情况外的作品：

分别编辑时间为7:45和7:50，没有错误;
编辑结束时间，在开始时间之前，从7:50到7:44，验证完成其工作，即 $ error.validAfter = true ;
忽略结束时间字段并将结束时间编辑为结束时间，从7:45到7:47，（< em> $ error.validBefore error = true ）;
将开始时间编辑为结束时间，从7:47到7:43 - $ error.validBefore = false ; < / LI>

此时， $ error.validAfter 对于结束时间仍为真。有没有办法在开始时间验证后更新此内容，第四个项目符号已经确认？

HTML：

<div data-ng-app="scheduleApp">
<h2>{{ "Schedule App" }}</h2>
<div class="time" data-ng-form="formtime">
    <div class="form-row">
        <span class="label">Start time:</span>
        <span class="field">
            <input type="text" name="startTime" ng-model="startTime" is-from placeholder="e.g. 7:50" required validatetime="{{ endTime }}" />
            <span class="error" ng-class="{required: formtime.startTime.$error.required, invalid: formtime.startTime.$error.validTime}">enter a valid time, <i>hh:mm</i></span>
            <span class="error" ng-show="formtime.startTime.$error.validBefore" ng-class="{invalid: formtime.startTime.$error.validBefore && !formtime.startTime.$error.validTime}">start time must be before the end time</span>
        </span>
        <span>{{ formtime.startTime.$error }}</span>
    </div>
    <div class="form-row">
        <span class="label">End time:</span>
        <span class="field">
            <input type="text" name="endTime" ng-model="endTime" placeholder="e.g. 7:55" required validatetime="{{ startTime }}" />
            <span class="error" ng-class="{required: formtime.endTime.$error.required, invalid: formtime.endTime.$error.validTime}">enter a valid time, <i>hh:mm</i></span>
            <span class="error" ng-show="formtime.endTime.$error.validAfter" ng-class="{invalid: formtime.endTime.$error.validAfter && !formtime.endTime.$error.validTime}">end time must be after the start time</span>
        </span>
        <span>{{ formtime.endTime.$error }}</span>
    </div>
</div>

使用Javascript：

var app = angular.module("scheduleApp", []);

function PMhour(hour) {
    var pmHours = [1,2,3,4,5,6];

    return pmHours.indexOf(hour) >= 0 ? (hour + 12) : hour;
}

app.directive("validatetime", function() {
    return {
        restrict:   "A"
        , require:  "ngModel"
        , link:
            function($scope, elem, attrs, ctrl) {
                var validTime       = false;
                var validCompare    = false;
                var isFrom          = attrs.isFrom == null ? false : true;
                var otherTime;

                attrs.$observe("validatetime", function(otherTimeVal) {
                    otherTime   = otherTimeVal;
                });

                ctrl.$parsers.unshift   (isValidTime, isValidTimeCompare);
                ctrl.$formatters.unshift(isValidTime, isValidTimeCompare);

                function isValidTime(value) {
                    var regex   = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/i;

                    validTime   = false;

                    if (value != null) {
                        if (value.length) {
                            validTime   = regex.test(value);
                        }
                    }

                    ctrl.$setValidity('validTime', validTime);

                    if (validTime) {
                        return value;
                    }
                }

                function isValidTimeCompare(value) {
                    var tmpFrom;
                    var tmpTo;

                    if (otherTime) {
                        validCompare    = (otherTime.length == 0);
                    }
                    else {
                        validCompare    = true;
                    }

                    if (validTime) {
                        if (otherTime.length) {
                            if (isFrom) {
                                tmpTo   = new Date(2000, 0, 1, PMhour(parseInt(otherTime.split(":")[0])), parseInt(otherTime.split(":")[1]));
                                tmpFrom = new Date(2000, 0, 1, PMhour(parseInt(value.split(":")[0]))    , parseInt(value.split(":")[1]));
                            }
                            else {
                                tmpFrom = new Date(2000, 0, 1, PMhour(parseInt(otherTime.split(":")[0])), parseInt(otherTime.split(":")[1]));
                                tmpTo   = new Date(2000, 0, 1, PMhour(parseInt(value.split(":")[0]))    , parseInt(value.split(":")[1]));
                            }

                            validCompare = (tmpFrom < tmpTo);
                        }
                    }

                    if (isFrom) {
                        ctrl.$setValidity("validBefore", validCompare); // from is before the other time
                    }
                    else {
                        ctrl.$setValidity("validAfter", validCompare);      // to is after the other time
                    }

                    return value;
                };
            }
    }
});

此处有采访者：http://plnkr.co/edit/Innbv6lCYewefSgKhvGA?p=info
对不起，我是plunker概念的新手。如果您看不到代码，请告诉我。 Mahalo的帮助。

Answer 1

我认为你过分复杂化了。只需跟踪一个变量isValid，每次更改值时都会更新。只需将开头和结尾比作您喜欢的日期，您应该是金色的。

只需注意 - 您的代码看起来非常复杂 - 您可能不需要在每个时间字段上只需$watch，您可以使用这两个字段值执行checkValidity()函数＃39 ;.如果这没有意义，请告诉我。

angularjs validation更新另一个输入字段的错误状态

1 个答案: