当有2个验证错误时,仅显示1错误消息

时间:2017-07-13 14:58:41

标签: javascript angularjs typescript

我在AngularJS中有一个时间选择器,您可以在其中为每天选择多个不同的时间段。我在代码中验证了重复和任何重叠的时间段。如果我输入以下2个时间段,上午11:00 - 凌晨12:00和上午11:00 - 凌晨12:00,我会收到2条验证错误消息 - '输入重叠时间'和'输入重复次数'。

这正在按预期工作,因为两种验证都在发生,但在这种情况下,我只想要输入重复次数'要显示。请查看此图片以获取验证错误:

enter image description here

我的代码是:



public validateNoDuplicates(timeSegments : string[][]) : void {
        let seen : object = {};
        let timeSegmentsWithoutDuplicates : string[][] = [];

        let skipValidationCount : number = 0;
        for (let i : number = 0, l : number = timeSegments.length; i < l; i++) {
            if (this.isValidTimeSegment(timeSegments[i])) {
                let timeSegmentIdentifier : string = timeSegments[i].join();
                if (!seen[timeSegmentIdentifier]) {
                    timeSegmentsWithoutDuplicates.push(timeSegments[i]);
                    seen[timeSegmentIdentifier] = 'found';
                }
            } else {
                skipValidationCount++;
            }
        }

        if (timeSegmentsWithoutDuplicates.length !== timeSegments.length - skipValidationCount) {
            this.validationMessages.push(this.DUPLICATE_TIMES_ENTERED);
        }
}

public validateNoOverlaps(timeSegments : string[][]) : void {
    let sortedTimeSegments : string[][] = angular.copy(timeSegments);
    sortedTimeSegments.sort(); // Sort time segments by start time

        for (let i : number = 0; i < sortedTimeSegments.length - 1; i++) {
            if (this.isValidTimeSegment(sortedTimeSegments[i]) &&          this.isValidTimeSegment(sortedTimeSegments[i + 1])) {
                let endTimeOfCurrentTimeSegment : string = sortedTimeSegments[i][this.END_TIME_INDEX];

                let startTimeOfNextTimeSegment : string = sortedTimeSegments[i + 1][this.START_TIME_INDEX];

                if (endTimeOfCurrentTimeSegment > startTimeOfNextTimeSegment) {

                    this.validationMessages.push(this.OVERLAPPING_TIMES_ENTERED);
                }
            }
        }
    }
&#13;
&#13;
&#13;

&#13;
&#13;
<div ng-show="$ctrl.daypartingValidator.validationMessages.length > 0">
  <div>
    <h6>Please correct the following errors:</h6>
  </div>
  <ul>
    <div ng-repeat="validationMessage in $ctrl.daypartingValidator.validationMessages" >
      <span>{{validationMessage}}</span>
    </div>
  </ul>
</div>
&#13;
&#13;
&#13; --Update-- 我无法检查数组中输入的重叠时间&#39;在某些情况下,如下所示,需要显示2条消息:

valid errors

- 更新 -

我已更新代码以检查开始和结束时间是否与下一个开始和结束时间相匹配。如果时间段如上午01:00 - 上午05:00&amp;上午01:00 - 凌晨04:00进入。如果存在重叠但开始或结束时间与下一个开始或结束时间匹配,则不会显示该消息。

&#13;
&#13;
for (let i : number = 0; i < sortedTimeSegments.length - 1; i++) {
            if (this.isValidTimeSegment(sortedTimeSegments[i]) && this.isValidTimeSegment(sortedTimeSegments[i + 1])) {
                let endTimeOfCurrentTimeSegment : string = sortedTimeSegments[i][this.END_TIME_INDEX] == this.TWELVE_AM ? "24:00" :
                    sortedTimeSegments[i][this.END_TIME_INDEX];

                let endTimeOfNextTimeSegment : string = sortedTimeSegments[i + 1][this.END_TIME_INDEX] == this.TWELVE_AM ? "24:00" :
                    sortedTimeSegments[i + 1][this.END_TIME_INDEX];

                let startTimeOfNextTimeSegment : string = sortedTimeSegments[i + 1][this.START_TIME_INDEX];
                let startTimeOfCurrentTimeSegment : string = sortedTimeSegments[i][this.START_TIME_INDEX];

                if (endTimeOfCurrentTimeSegment > startTimeOfNextTimeSegment) {

                    if ((startTimeOfCurrentTimeSegment != startTimeOfNextTimeSegment) &&
                            (endTimeOfCurrentTimeSegment != endTimeOfNextTimeSegment)) {
                        this.validationMessages.push(this.OVERLAPPING_TIMES_ENTERED);
                    }
                }
            }
        }
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

如果没有HTML,我只能建议您在推送OVERLAPPING_TIMES验证消息之前,检查数组中是否已存在DUPLICATE_TIMES消息。

编辑:如果开始和结束时间完全匹配,请将OVERLAPPING_TIMES的代码更改为不推送消息。

EDIT2:使用||推送OVERLAPPING_TIMES消息,因为如果其中任何一个不匹配,那么它们实际上并不重复。

答案 1 :(得分:0)

我更新了代码以使用'或'代替'和',这解决了它:

if (startTimeOfCurrentTimeSegment != startTimeOfNextTimeSegment ||
                            endTimeOfCurrentTimeSegment !=            endTimeOfNextTimeSegment) {
                        this.validationMessages.push(this.OVERLAPPING_TIMES_ENTERED);
                    }