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

Posted

技术标签:

【中文标题】如何使用来自 AngularJS 控制器的无效输入正确清理表单?【英文标题】:How to properly clean form with invalid input from AngularJS controller? 【发布时间】: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 = ,仅重置模型 这方面有什么进展吗?也咬我。 关于如何解决这个问题的任何消息?我也面临无效字段的同样问题。 【参考方案1】:

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

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

【讨论】:

这非常适合完全重置表单。不幸的是,就我而言,我想将表单(和模型)重置为初始状态,例如我的复选框最初应该被选中。如果我单击 &lt;button type="reset"&gt;,视图不会尊重在 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://***.com/a/18874550/5065857

【讨论】:

【参考方案7】:

ng-click="formData=;"

就这样给吧,

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

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

【讨论】:

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

以上是关于如何使用来自 AngularJS 控制器的无效输入正确清理表单?的主要内容,如果未能解决你的问题,请参考以下文章

即使输入无效,AngularJS表单也会验证

如何使用 angularJS restful 服务使用来自外部文件的 json 数据

如何有条件地要求使用 AngularJS 进行表单输入?

如何在angularjs中通过ajax显示来自url的json数组

如何在rails中处理来自应用程序控制器的无效真实性令牌json请求

如何使用AngularJs获取时间,然后将其绑定到从视图到控制器的输入时间