javascript - 应禁用 AngularJS 提交表单中的开始日期结束日期验证

Question

如果开始日期-结束日期验证失败，我不想提交我的表单...在我的表单中，如果我有这个...

<form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate>

<input type="text" placeholder="Start Date" ng-model="schedule.startDate" class="form-control" ui-date novalidate required>
<input type="text" name="endDate" placeholder="End Date" ng-model="schedule.endDate" class="form-control" ui-date novalidate ng-change='checkErr(schedule.startDate,schedule.endDate)' required>

 <button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="errMessage || scheduleForm.$invalid">Add Schedule</button>  

在 Controller 中:

 $scope.checkErr = function(startDate,endDate) {
         $scope.errMessage = '';
        var curDate = new Date();

        if(new Date(startDate) > new Date(endDate)){
          $scope.errMessage =  'End Date should be greater than start date';
          // var err=function() {
          // $window.alert('End Date should be greater than start date');};
          // err();
          return false;
        }
        if(new Date(startDate) < curDate){
            $scope.errMessage = 'Start date should not be before today.';
          //  var err=function() {
          // $window.alert('Start date should not be before today.');};
          // err();
          return false;
        }
    };

并在添加功能中:

  $scope.addSchedule=function(schedule){

    $scope.schedules.push({
      startDate: schedule.startDate,
      endDate: schedule.endDate,
    });

    schedule.startDate='';
    schedule.endDate='';
  };

问题是按钮看起来禁用了它允许添加数据...请帮忙提前感谢

Answer 1

要正确比较时间应使用getTime()函数

if(new Date(startDate).getTime() > new Date(endDate).getTime())

并检查按钮中的日期验证，因此无需在结束日期更改时使用checkErr()

<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="checkErr(schedule.startDate,schedule.endDate)|| scheduleForm.$invalid">Add Schedule</button>

你的checkErr函数如下:

$scope.checkErr = function(startDate,endDate) {
    var curDate = new Date();
    // can set error message if need to show 
    if(new Date(startDate).getTime() > new Date(endDate).getTime()){
       return true; // if invalid
    }
    if(new Date(startDate).getTime() < curDate.getTime()){
       return true; // if invalid
    } else {
       return false // if valid
    }
};