AngularJS：提交時重置表單
[英]AngularJS: Reset form on submit
問題描述
我將AngularJS表單用於聯系表單，並希望在成功提交后重置該表單。 我已經找到了許多有關如何重置AngularJS表單並使其正常工作的示例，但是，我一直無法找到一種在提交時成功重置表單的方法。 我的reset（）函數清除表單字段，並在提交時調用時似乎將表單的狀態設置回原始狀態，但是，仍然顯示僅當字段無效時才顯示的消息。
這是我帶有功能的控制器代碼...
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);
}
}
}
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); } } }
<!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>
3 個解決方案
解決方案1
1 已采納 2016-02-09 20:45:12
您可以將要在sub-submit上運行的函數放在ng-submit指令中，該函數的執行似乎與reset按鈕相同：
<form name="form" ng-submit="contact.submit(form)">
解決方案2
1 2016-02-09 20:47:48
嘗試以下操作，添加ng-submit
<form name="form" novalidate ng-submit="contact.submit(form)">
它為我工作。
您的按鈕現在應該看起來像這樣
<input type="submit" value="Submit" />
希望這可以幫助。
解決方案3
1 2016-02-09 20:55:07
我還發現，如果您仍要使用表單提交而不是ng-submit事件，則需要將表單清除代碼包裝在$timeout函數中。 這將迫使您粘貼在$ timeout中的代碼“同步”執行任何其他事件操作（在這種情況下為表單提交）。
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();
}
}
在AngularJS中提交后如何重置表格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.