我无法允许在我的AngularJS表单中输入未来的日期。
这是我的HTML代码:
<div ngCloak ng-app="laurelMoney" ng-controller="myCtrl">
<form name="userForm">
<div class="form-group">
<input type='date' id="trandate" class="form-control" ng-model="trandate" required ng-class="{ 'has-error' : userForm.trandate.$error }" />
<p ng-show="userForm.trandate.$error" class="help-block">Transaction can't be in future</p>
</div>
<a href="#" class="btn btn-primary btn-sm btn-block" ng-click="submitForm()" type="submit">Add Transaction</a>
</form>
我的JavaScript代码是:
angular.module('laurelMoney', [])
.controller('myCtrl', function($scope) {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = yyyy + '-' + mm + '-' + dd;
document.getElementById("trandate").setAttribute("max", today);
$scope.submitForm = function() {
if ($scope.userForm.$valid) {
alert('our form is amazing');
} else {
console.log("Error");
}
};
});
当日历弹出时,这个功能可以正常工作。未来的日期都被禁用了。但我可以手动将其更改为未来的日期输入框中。
系统也允许提交未来的日期。该怎么处理?
谢谢。
ng-class
是否有必要呢?我相信当input[date]
无效时,你会得到.ng-invalid.ng-invalid-max
应用于它。 - Danng-submit='userForm.$valid && submitForm()'
中检查表单的有效性,而不是在控制器中检查。这样可以将所有内容都放在一个地方。此外,如果你想要防止显示验证消息,可以使用<div ng-if='userForm.$invalid && userForm.$submitted'>
。 - DanngClass
部分,并使用ng-disabled
来改变按钮的状态。 - developer033