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

Start date End date validation in angularjs submit form should be disabled

本文关键字：日期 验证 结束 angularjs 表单 开始 提交      更新时间：2023-09-26

如果开始日期结束日期验证失败，我不想提交我的表格。。。以我的形式，如果我有这个。。。

<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它允许添加数据。。。做帮助提前感谢

要正确比较时间，应使用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
    }
};

为什么不在元素准备就绪时添加验证。看看这里的演示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>

相关文章：