应该禁用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>

并在控制器中：

 $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='';
  };

概率是按钮外观禁用bt允许其添加数据...做帮助

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

Answer 2

当元素准备好时，为什么不添加验证。 在此处查看演示https://plnkr.co/edit/JunWzLjhLCPMqZnxsSYw?p=preview

 var app = angular.module('myApp', ['ui.date']); app.controller('MainCtrl', function($scope) { $scope.schedule = {}; $scope.dateOptions = { changeYear: true, date:$scope.schedule.startDate, changeMonth: true, yearRange: '1900:-0', maxDate: new Date(new Date().setDate(new Date().getDate() + 2)), minDate:new Date() }; $scope.addSchedule=function(schedule){ console.log($scope.schedule) }; });

 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> <script src="date.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate> <input type="text" placeholder="Start Date" ng-model="schedule.startDate" ui-date-format="DD, d MM, yy" class="form-control" min-date="minDate" max-date="maxDate" ui-date="dateOptions" novalidate required> <!--<input type="text" name="endDate" placeholder="End Date" ui-date-format="DD, d MM, yy" 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="scheduleForm.$invalid">Add Schedule</button> </form> </body> </html>

应该禁用angularjs提交表单中的开始日期结束日期验证

问题描述

2 个解决方案

解决方案1
1 2016-04-15 14:37:01

解决方案2
0 2016-04-15 14:27:55

应该禁用angularjs提交表单中的开始日期结束日期验证

问题描述

2 个解决方案

解决方案1 1 2016-04-15 14:37:01

解决方案2 0 2016-04-15 14:27:55

解决方案1
1 2016-04-15 14:37:01

解决方案2
0 2016-04-15 14:27:55