如何正确清除AngularJS控制器输入无效的表单

How to properly clean form with invalid input from AngularJS controller?

本文关键字：无效 表单 输入 控制器 何正确 清除 AngularJS      更新时间：2024-06-09

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

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

虽然该赋值清除了呈现的HTML表单中的所有有效字段，但它不会清除无效域，如无效URL。例如，如果用户将提供无效的输入ht://t/p作为URL，则该输入将不会从呈现的表单中删除

我认为这是因为任何无效的URL都不会反映在模型中——这样一个无效的URL不会"进入"模型，因为它没有通过NgModelController#$parsers数组中的验证。因此，在模型中根本没有URL。因此，将表单模型重置为{}实际上不能更改模型的URL，因为它尚未设置。

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

虽然将单个字段分配给""对于简单表单来说是一种变通方法，但对于具有许多字段的更复杂表单来说，它很快就会变得麻烦。

因此，我如何通过编程高效地重置表单——包括所有无效的输入字段？

我在http://plnkr.co/c2Yhzs在这里，您可以检查并运行一个完整的示例来显示上述效果。

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

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

我认为这个解决方案相当优雅：您的plnkr已审核
最大的区别在于模型对象的初始化。

我认为当一个变量变得未定义，不再更新时，事情就会变得一团糟。。它应该与验证的工作方式（文档链接）深入联系（veeeery）

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

PS：您可以在Web应用程序中为所有表单回收resetImplicitly：）

在尝试了几个类似问题的答案但没有成功后，这对我来说很有效。

在我的控制器中：

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

只需点击或以任何方式打电话即可。

干杯

Thing is标签的类型为"url"，意思是如果用户将特别输入一个有效的url，那么只有它才会设置模型的值

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

它看起来像是在设置值，但实际上并没有，所以当您将其值设置为"时。Angular将模态值设置为"让我们举另一个例子：将"文本"替换为"电子邮件"

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

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

您可能需要复制处于原始状态的模型，并在重置时将模型设置为原始。

这里有一个很好的例子：

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

url表单字段只有在有效的情况下才会传递到模型中。因此，在表单中存在invlayed url条目的情况下，范围变量不会与模型一起分配，并且通过向模型分配空对象来清除表单条目仍将在UI前端保留该值。

最好的替代方法是为与表单数据相关联的模型分配一个null。类似的答案出现在这里：

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

ng click="formData=｛｝；"

就这样给吧，

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

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

相关文章：