[英]Start date End date validation in angularjs submit form should be disabled
如果開始日期-結束日期驗證失敗,我不希望提交表單...如果我有此表單,則不提交表單...
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.