我使用AngularJS表单作为联系表单,并希望在成功提交时重置表单。我已经找到了很多关于如何重置AngularJS表单的例子,并且有这样的工作,但是,我一直无法找到在提交时成功重置表单的方法。我的reset()函数清除表单字段,并且在提交时调用时似乎将表单的状态设置回pristine,但是,仍然会显示仅在字段无效时显示的消息。
这是我的控制器代码,其功能是......
angular
.module('plunker', [])
.controller('ContactCtrl', ContactCtrl);
function ContactCtrl() {
var vm = this;
vm.reset = reset;
vm.submit = submit;
function reset(form) {
if (form) {
vm.name = undefined;
vm.email = undefined;
form.$setValidity();
form.$setPristine();
form.$setUntouched();
}
}
function submit(form) {
if (form) {
vm.reset(form);
}
}
}
完整代码可在下方或Plunker
找到
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<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="app.js"></script>
</head>
<body ng-controller="ContactCtrl as contact">
<form name="form" novalidate>
Name:
<input type="text" ng-model="contact.name" name="uName" required="" />
<br />
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>
E-mail:
<input type="email" ng-model="contact.email" name="uEmail" required="" />
<br />
<div ng-show="form.$submitted || form.uEmail.$touched">
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
<input type="button" ng-click="contact.reset(form)" value="Reset" />
<input type="submit" ng-click="contact.submit(form)" value="Submit" />
</form>
<pre>
FORM:
form.$pristine = {{form.$pristine}}
form.$dirty = {{form.$dirty}}
form.$submitted = {{form.$submitted}}
NAME:
form.uName.$pristine = {{form.uName.$pristine}}
form.uName.$dirty = {{form.uName.$dirty}}
form.uName.$valid = {{form.uName.$valid}}
form.uName.$invalid = {{form.uName.$invalid}}
EMAIL:
form.uEmail.$pristine = {{form.uEmail.$pristine}}
form.uEmail.$dirty = {{form.uEmail.$dirty}}
form.uEmail.$valid = {{form.uEmail.$valid}}
form.uEmail.$invalid = {{form.uEmail.$invalid}}
</pre>
</body>
</html>
&#13;
System.exit(0)
&#13;
答案 0 :(得分:1)
你可以在ng-submit
指令内放置你想要运行的函数 - 这似乎与重置按钮一样执行:
<form name="form" ng-submit="contact.submit(form)">
答案 1 :(得分:1)
尝试以下操作,添加ng-submit
<form name="form" novalidate ng-submit="contact.submit(form)">
它对我有用。
您的按钮现在应该如下所示
<input type="submit" value="Submit" />
希望这会有所帮助。
答案 2 :(得分:1)
我还发现,如果您仍想使用表单提交而不是ng-submit事件,则需要将表单清除代码包装在$timeout
函数中。这会强制你在$ timeout内执行的代码同步执行&#39;任何其他事件动作(在这种情况下是表单提交)。
angular
.module('plunker', [])
.controller('ContactCtrl', ['$scope','$timeout', ContactCtrl]);
function ContactCtrl($scope, $timeout) {
var vm = this;
vm.reset = reset;
vm.submit = submit;
vm.resetMe = resetMe;
function reset($event, form) {
if ($scope.form) {
$timeout(function(){
vm.name = undefined;
vm.email = undefined;
$scope.form.$setValidity();
$scope.form.$setPristine();
$scope.form.$setUntouched();
});
}
}
function submit(form) {
if (form) {
vm.reset(form);
}
}
function resetMe(){
console.log($scope);
debugger;
$scope.form.$setPristine();
}
}