如何使用来自 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>
【讨论】:
这非常适合完全重置表单。不幸的是,就我而言,我想将表单(和模型)重置为初始状态,例如我的复选框最初应该被选中。如果我单击<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://***.com/a/18874550/5065857
【讨论】:
【参考方案7】:ng-click="formData=;"
就这样给吧,
<button ng-click="formData=">(1) Reset Full Data: formData = </button>
直接在 ng-click 中重置表单数据。
【讨论】:
这不是真的。它仅适用于有效的输入。 $viewValue 之类的东西与您要删除的 $modelValue 不同。以上是关于如何使用来自 AngularJS 控制器的无效输入正确清理表单?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 angularJS restful 服务使用来自外部文件的 json 数据
如何在angularjs中通过ajax显示来自url的json数组