Javascript angularjs验证更新另一个输入字段的错误状态

阿罗哈。我有两个时间输入字段，开始+结束。我创建了自定义验证来检查字段是否为空、有效时间以及开始时间是否早于结束时间。除以下工程外的其他工程：

编辑两次分别为7:45和7:50，无错误； 将结束时间编辑为开始时间之前的时间，从7:50到7:44，验证将执行其工作，即$error.validAfter=true； 忽略结束时间字段，并将开始时间编辑为在结束时间之后，从7:45到7:47，$error.validBefore error=true； 将开始时间编辑为在结束时间之前，从7:47到7:43-$error.validBefore=false； 此时，$error.validAfter对于结束时间仍然为真。在确认开始时间（第四个项目符号）后，是否有办法更新此信息

HTML:

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

普朗克：

---

对不起，我对普朗克的概念还不熟悉。如果您看不到代码，请告诉我。谢谢你的帮助。

我觉得你把事情弄得太复杂了。只需跟踪一个变量isValid，每当其中一个值发生变化时都会更新它。简单地比较开始和结束日期，就像你正在做的那样，你应该是金色的

---

请注意，您的代码看起来相当复杂，您可能不需要在每个时间字段上多加一个$watch，在这个时间字段中，您可以使用两个字段值执行一个checkValidity函数。如果这不合理，请告诉我

迪伦。谢谢你的回复。我毫不怀疑你是对的。因为我是AngularJS的新手，所以我只是在这里和那里寻找各种解决方案，它们会以某种方式起作用。您的意思是结合validtime+validcompare功能吗？您能否提供一些代码以适合您的描述/响应？提前谢谢。

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