AngularJS中的数据验证
AngularJS中的数据验证
提问于 2016-09-17 21:36:21
我不能允许未来的日期以我的形式建在英格拉杰。
以下是我的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");
}
};
});当日历弹出的时候，这很正常。未来的日期都是禁用的。但我可以在日期输入框中手动将其更改为未来的日期。
系统也允许提交未来日期。怎么做呢？？
Plunker
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-17 22:10:28
嗯，据我从你的问题中所能理解的，你只是试图抛出一个错误信息或不允许用户选择未来的日期，对吗？所以，给你：
备注：
- 你的
Angular版本在柱塞中是完全过时的，所以它可能不能像你预期的那样工作； ngCloak应为ng-cloak；- 您应该在您的
attribute中添加名称input来验证它； - 另外，您可以使用
ngSubmit来提交表单，而不是ng-click。 - 正如注释中所指出的，如果
button是invalid，则可以禁用invalid，而不是在controller中进行检查； - 最后，要将日期设置为最大日期(在今天的情况下)，只需执行以下操作：
$scope.max = new Date()并在视图中调用它；
下面是一个完整的例子：
(function() {
'use strict';
angular
.module('laurelMoney', [])
.controller('myCtrl', myCtrl);
myCtrl.$inject = ['$scope'];
function myCtrl($scope) {
$scope.max = new Date();
}
})();<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body ng-app="laurelMoney">
<div ng-cloak ng-controller="myCtrl">
<form name="userForm" novalidate ng-submit="submitForm()">
<div class="form-group" ng-class="{ 'has-error' : userForm.trandate.$error }">
<input type="date" name="trandate" class="form-control" required max="{{max}}" ng-model="trandate">
<p ng-if="userForm.trandate.$touched && userForm.trandate.$error.required" class="help-block">Transaction is required</p>
<p ng-if="userForm.trandate.$error.date" class="help-block">Transaction should be a valid date</p>
<p ng-if="userForm.trandate.$error.max" class="help-block">Transaction can't be in future</p>
</div>
<button type="submit" class="btn btn-primary btn-sm btn-block" ng-disabled="userForm.$invalid">Add Transaction</button>
</form>
<pre ng-bind="userForm.trandate.$error | json"></pre>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39551977
复制相关文章
相似问题
腾讯云开发者
