在AngularJS中，我们经常需要使用表单来收集用户输入的数据，并将其提交到服务器。但是，一旦表单成功提交，如何重置它以准备下一个输入呢？本文将介绍一些方法来实现这个目标。
方法1：使用ng-form指令
在AngularJS中，可以使用ng-form指令来创建表单，并通过该指令中的$setPristine()方法来重置表单。例如：
<form name="myForm" ng-submit="submit()"> <input type="text" ng-model="name" required> <button type="submit">提交</button> </form>
在上面的代码中，我们给表单添加了一个名称为myForm的名称，以便在控制器中进行引用。当表单提交时，submit()函数将被调用。在此函数中，我们可以使用以下代码重置表单：
$scope.submit = function() {
// 处理表单提交
...
// 重置表单
$scope.myForm.$setPristine();
$scope.name = '';
};在上面的代码中，我们不仅将表单设置为原始状态，还清空了与输入相关联的模型数据。
方法2：使用$setUntouched()方法
除了使用$setPristine()方法之外，我们还可以使用$setUntouched()方法将表单中所有控件的状态设置为“未接触状态”，以便在用户开始输入时显示错误消息。例如：
<form name="myForm" ng-submit="submit()"> <input type="text" ng-model="name" required> <button type="submit">提交</button> </form>
-- -------------------- ---- ------- ------------- - ---------- - -- ------ --- -- ---- ----------------------------- ------------------------------ ----------- - --- --
方法3：使用$route.reload()方法
如果您的应用程序使用AngularJS路由，您可以使用$route.reload()方法来重新加载当前页面并清除表单数据。例如：
$scope.submit = function() {
// 处理表单提交
...
// 重置表单
$scope.myForm.$setPristine();
$route.reload();
};总结
在AngularJS中，有多种方法可以重置表单。您可以使用ng-form指令和$setPristine()方法、$setUntouched()方法或$route.reload()方法。这些方法都可以帮助您实现与表单相关的任务，并确保您的应用程序在用户进行下一个操作之前准备好了。
示例代码：https://codepen.io/anon/pen/PvJxEV
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28827