如何正确地清洁形式与AngularJS控制器无效输入？ [英] How to properly clean form with invalid input from AngularJS controller?
问题描述
我有一个包含AngularJS形式 - 等领域中 - 类型的一个网址。后者是重要的，因为这迫使相应的输入是一个有效的URL。
I have an AngularJS form that contains - among other fields - one of type url. The latter is important as this forces the corresponding input to be a valid URL.
在某些情况下（比如，用这样的形式一个模式对话框是关闭的），我想清楚了这种形式编程。为此，我实现的方法重置，基本上清除通过设置相应的表单模型 $ scope.formData = {} 。因此，设置表单模型到一个新的空白对象。
Under certain conditions (for instance, a modal dialog with such a form is to be closed), I want to clear that form programmatically. For that purpose, I implemented method reset that basically clears the corresponding form model by setting $scope.formData = {}. Thus, it sets the form model to a new, blank object.
虽然该转让清除所有的有效在呈现的HTML表单字段，它的不可以明确的无效领域里，如无效的网址。例如，如果用户将提供无效输入 HT：// T / P 作为URL，该输入不会从呈现形式去除
While that assignment clears all valid fields in the rendered HTML form, it does not clear invalid fields, like an invalid URL. For instance, if the user would provide invalid input ht://t/p as URL, that input would not be removed from the rendered form.
我认为这是由于这一事实，即任何无效的网址不被模型中反映出来 - 这样一个无效的URL只是不会做它的模型，因为它并没有在 {} 不能真正的变更的因为它尚未设置模型的URL。
I think this is due to the fact that any invalid URL is not reflected by the model - such an invalid URL just wouldn't "make" it to the model because it does not pass validation in the NgModelController#$parsers array. Thus, in the model - there is no URL at all. Consequently, resetting the form model to {} cannot actually change the model's URL as it has not been set yet.
但是，如果方法重置明确设置字段 $ scope.formData.url =，无效的网址将得到妥善清理（至少，呈现的形式也不会表现出来了）。这是通过在模型中的URL的明确的变化引起的。然而，现在，模型变量 formData.url 包含空字符串（当然，这并不奇怪），而使用 = {} ，所有领域将是未定义代替。
However, if method reset explicitly sets field $scope.formData.url = "", the invalid URL will be cleared properly (at least, the rendered form won't show it anymore). This is caused by the explicit change of the URL in the model. However, now, model variable formData.url contains the empty string (well, not surprisingly), while by using = {}, all fields would be undefined instead.
尽管对，分配单独的领域工作作为解决方法简单的形式，它很快成为了许多领域的更复杂的形式繁琐。
While assigning individual fields to "" works as workaround for simple forms, it quickly becomes cumbersome for more complex forms with many fields.
因此，我怎么会编程有效地重置表单 - 包括所有的无效输入字段以及
Thus, how could I programmatically reset the form efficiently and effectively - including all invalid input fields as well?
我创建了 http://plnkr.co/c2Yhzs 一个Plunker在那里你可以分析和运行，显示上述效果的完整范例
I created a Plunker at http://plnkr.co/c2Yhzs where you can examine and run a complete example showing the above effect.
推荐答案
指定您的复位按钮的类型。这不仅会调用ngClick功能，也将清除HTML表单的内容。
Specify the type of your button as reset. That will not only call the ngClick function, it will also clear the content of the HTML form.
<button type="reset" ng-click="resetFormData()">Reset</button>
这篇关于如何正确地清洁形式与AngularJS控制器无效输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
