如何使用AngularJS控制器的无效输入正确清理表单？

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.

我有一个AngularJS表单，其中包含类型url之一。后者很重要，因为这会强制相应的输入成为有效的URL。

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.

在某些条件下（例如，要关闭具有此类表单的模式对话框），我想以编程方式清除该表单。为此，我实现了方法重置，它通过设置$ scope.formData = {}基本上清除了相应的表单模型。因此，它将表单模型设置为新的空白对象。

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.

虽然该分配清除了呈现的HTML表单中的所有有效字段，但它不会清除无效字段，例如无效的URL。例如，如果用户提供无效输入ht：// t / p作为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.

我认为这是因为模型没有反映任何无效的URL - 这样一个无效的URL只是不会“模仿”它到模型，因为它没有在NgModelController＃$ parsers数组中通过验证。因此，在模型中 - 根本没有URL。因此，将表单模型重置为{}实际上无法更改模型的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.

但是，如果方法重置显式设置字段$ scope.formData.url =“”，则无效的URL将被正确清除（至少，呈现的表单将不再显示它）。这是由模型中URL的显式更改引起的。但是，现在，模型变量formData.url包含空字符串（好吧，这并不奇怪），而通过使用= {}，所有字段都将是未定义的。

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?

因此，我如何能够以编程方式有效地重置表单 - 包括所有无效的输入字段？

I created a Plunker at http://plnkr.co/c2Yhzs where you can examine and run a complete example showing the above effect.

我在http://plnkr.co/c2Yhzs创建了一个Plunker，您可以在其中检查并运行一个显示上述效果的完整示例。

7 个解决方案

#1

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.

指定按钮类型为重置。这不仅会调用ngClick函数，还会清除HTML表单的内容。

<button type="reset" ng-click="resetFormData()">Reset</button>

#2

I think this solution is moderately elegant: your plnkr reviewed
The big difference is the initialization of your model object.

我认为这个解决方案适度优雅：你的plnkr审查了最大的区别是模型对象的初始化。

I think things gets messed up when a variable becomes undefined, it doesn't get updated anymore.. it should be connected (veeeery) deeply with how validation works (docs link)

我认为当变量变得未定义时，事情会变得混乱，它不会再被更新了......它应该与验证的工作原理（文档链接）深度联系（veeeery）

Returning undefined in that case makes the model not get updated, i think this is exactly what happens behind the curtain

在这种情况下返回undefined会使模型无法更新，我认为这正是幕后发生的事情

PS: you can recycle resetImplicitly for all your forms in the webapp :)

PS：你可以在webapp中为你的所有表单明确地重置reset :)

#3

After trying several answers without success in similar questions, this worked for me.

在类似的问题中尝试了几个答案但没有成功，这对我有用。

In my controller:

在我的控制器中：

$scope.cleanForm = function() {
  $scope.myFormName.$rollbackViewValue();
};

Just call with some ng-click or any way you want.

只需按一下ng-click或任何你想要的方式来打电话。

Cheers

干杯

#4

The Thing is tag is of type "url" which means if user will enter specifically a valid url then only it will set values of model

Thing is标签的类型为“url”，这意味着如果用户将专门输入一个有效的url，那么它只会设置模型的值

If user will expicitly reset it which means setting model values to "" will again make textbox empty .

如果用户将显着重置它，这意味着将模型值设置为“”将再次使文本框为空。

It is looking like it is setting the values but actually not ,so when you set its value to "" .Angular will set modal value to "" Lets take another example : put replace "text" with "email"

看起来它正在设置值但实际上没有，所以当你将它的值设置为“”时.Angular会将模态值设置为“”让我们再看一个例子：将“text”替换为“email”

<input type="email" ng-model="formData.name" />
      <br />URL:
      <input type="url" ng-model="formData.url" />
      <br />

In above code If you will enter invalid email it will not set the values of email's model.

在上面的代码中如果您输入无效的电子邮件，它将不会设置电子邮件模型的值。

#5

You probably need to make a copy of the model in its pristine state and set the model to pristine when you reset.

您可能需要在其原始状态下制作模型的副本，并在重置时将模型设置为原始模型。

There's a good example here:

这里有一个很好的例子：

http://www.angularjshub.com/examples/forms/formreset/

#6

The url form fields are passed into the model only if they are valid. Thus in case of an invlaid-url entry in the form, the scope variable is not assigned with the model and clearing the forms entry by assigning an empty object to the model will still persist the value at the UI front.

仅当URL表单字段有效时，才会将其传递到模型中。因此，如果表单中包含invlaid-url条目，则不会为模型分配范围变量，并通过为模型分配空对象来清除表单条目仍将保留UI前端的值。

The best alternative to this is to assign the model associated with the form data with a null. A similar answer appears here:

对此最好的替代方法是将与表单数据关联的模型指定为null。这里出现了类似的答案：

https://*.com/a/18874550/5065857

#7

-4

ng-click="formData={};"

NG-点击= “FORMDATA = {};”

just give like this ,

就这样，

<button ng-click="formData={}">(1) Reset Full Data: formData = {}</button>

Reset your form data directly in ng-click itself.

直接在ng-click中重置表单数据。

#1