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

【问题标题】：How to properly clean form with invalid input from AngularJS controller?如何使用来自 AngularJS 控制器的无效输入正确清理表单？
【发布时间】：2013-12-27 00:00:48
【问题描述】：

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

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

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

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

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

虽然将单个字段分配给 "" 可以作为简单表单的解决方法，但对于具有许多字段的更复杂表单来说，它很快就会变得很麻烦。

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

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

【问题讨论】：

“干净”表单的概念意味着在调用某些操作之后 - 将表单返回到初始状态（也就是在页面重新加载之后）。在你的情况下$scope.formData = {}
@MaximShoustin 我想重置模型和视图。使用$scope.formData = {}，仅重置模型。
这方面有什么进展吗？也咬我。
关于如何解决这个问题的任何消息？我也面临无效字段的同样问题。

标签： javascript forms validation angularjs

【解决方案1】：

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

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

【讨论】：

这非常适合完全重置表单。不幸的是，就我而言，我想将表单（和模型）重置为初始状态，例如我的复选框最初应该被选中。如果我单击 <button type="reset">，视图不会尊重在 ngClick 处理程序中将模型值设置为 true

【解决方案2】：

我认为这个解决方案比较优雅：your plnkr reviewed
最大的不同是模型对象的初始化。

我认为当一个变量变得未定义时事情会变得一团糟，它不会再更新了.. 它应该与验证的工作方式（docs link）紧密相连（veeeery）

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

PS：您可以为 webapp 中的所有表单回收 resetImplicitly :)

【讨论】：

你拯救了我的一天！！！我使用了显式模式，强制为空字符串： $scope.filter.code = ""
我不相信这种方法适用于 1.8.2 版。我将 plnkr 更改为该版本，但它不再起作用。

【解决方案3】：

在类似问题中尝试了多个答案但均未成功后，这对我有用。

在我的控制器中：

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

只需通过一些 ng-click 或任何您想要的方式调用。

干杯

【讨论】：

【解决方案4】：

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

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

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

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

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

【讨论】：

【解决方案5】：

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

这里有一个很好的例子：

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

【讨论】：

【解决方案6】：

url 表单字段只有在它们有效时才被传递到模型中。因此，如果表单中有 invlaid-url 条目，范围变量不会分配给模型，并且通过为模型分配一个空对象来清除表单条目仍将保留 UI 前端的值。

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

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

【讨论】：

【解决方案7】：

ng-click="formData={};"

就这样给吧，

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

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

【讨论】：

这不是真的。它仅适用于有效的输入。 $viewValue 之类的东西与您要删除的 $modelValue 不同。