AngularJS 中的表单提交后重置

在AngularJS中,我们经常需要使用表单来收集用户输入的数据,并将其提交到服务器。但是,一旦表单成功提交,如何重置它以准备下一个输入呢?本文将介绍一些方法来实现这个目标。

方法1:使用ng-form指令

在AngularJS中,可以使用ng-form指令来创建表单,并通过该指令中的$setPristine()方法来重置表单。例如:

----- ------------- ---------------------
  ------ ----------- --------------- ---------
  ------- -------------------------
-------

在上面的代码中,我们给表单添加了一个名称为myForm的名称,以便在控制器中进行引用。当表单提交时,submit()函数将被调用。在此函数中,我们可以使用以下代码重置表单:

------------- - ---------- -
  -- ------
  ---
  
  -- ----
  -----------------------------
  ----------- - ---
--

在上面的代码中,我们不仅将表单设置为原始状态,还清空了与输入相关联的模型数据。

方法2:使用$setUntouched()方法

除了使用$setPristine()方法之外,我们还可以使用$setUntouched()方法将表单中所有控件的状态设置为“未接触状态”,以便在用户开始输入时显示错误消息。例如:

----- ------------- ---------------------
  ------ ----------- --------------- ---------
  ------- -------------------------
-------
------------- - ---------- -
  -- ------
  ---
  
  -- ----
  -----------------------------
  ------------------------------
  ----------- - ---
--

方法3:使用$route.reload()方法

如果您的应用程序使用AngularJS路由,您可以使用$route.reload()方法来重新加载当前页面并清除表单数据。例如:

------------- - ---------- -
  -- ------
  ---
  
  -- ----
  -----------------------------
  ----------------
--

总结

在AngularJS中,有多种方法可以重置表单。您可以使用ng-form指令和$setPristine()方法、$setUntouched()方法或$route.reload()方法。这些方法都可以帮助您实现与表单相关的任务,并确保您的应用程序在用户进行下一个操作之前准备好了。

示例代码:https://codepen.io/anon/pen/PvJxEV

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/28827