如何使用AngularJS控制器的无效输入正确清理表单？-Java 学习之路

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

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

虽然该分配清除了呈现的HTML表单中的所有 valid 字段，但它会执行 not clear 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，您可以在其中检查并运行一个显示上述效果的完整示例 .

7 回答

0
将按钮类型指定为重置 . 这不仅会调用ngClick函数，还会清除HTML表单的内容 .
```
<button type="reset" ng-click="resetFormData()">Reset</button>
```
回复于 2024-04-26T05:41:42+08:00
1

我认为这个解决方案适度优雅：your plnkr reviewed
最大的区别是模型对象的初始化 .

我认为当一个变量变得不确定时，事情变得混乱，它不会再被更新了......它应该与验证的工作方式（vesery）深深地联系起来（docs link）

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

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

回复于 2024-04-26T05:41:42+08:00
1
在类似的问题中尝试了几个答案后没有成功，这对我有用 .

在我的控制器中：
```
$scope.cleanForm = function() {
  $scope.myFormName.$rollbackViewValue();
};
```
只需按一下ng-click或任何你想要的方式 .

干杯
回复于 2024-04-26T05:41:42+08:00
-4
Thing is标签的类型为“url”，这意味着如果用户将专门输入有效的url，那么只有它才会设置模型的值

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

看起来它正在设置值但实际上没有，所以当你将它的值设置为“”时.Angular会将模态值设置为“”让我们再看一个例子：将“text”替换为“email”
```
<input type="email" ng-model="formData.name" />
      
URL:
      <input type="url" ng-model="formData.url" />
      
```
在上面的代码中如果您输入无效的电子邮件，它将不会设置电子邮件模型的值 .
回复于 2024-04-26T05:41:42+08:00
5

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

这里有一个很好的例子：

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

回复于 2024-04-26T05:41:42+08:00
0

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

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

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

回复于 2024-04-26T05:41:42+08:00
0
NG-点击= “FORMDATA = {};”

就这样，
```
<button ng-click="formData={}">(1) Reset Full Data: formData = {}</button>
```
直接在ng-click中重置表单数据 .
回复于 2024-04-26T05:41:42+08:00

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

7 回答

相关问题