Question

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

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

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

我认为这是因为模型没有反映任何无效的网址 - 这样一个无效的网址只是不会“模仿”到模型，因为它没有通过NgModelController#$parsers中的验证阵列。因此，在模型中 - 根本没有URL。因此，将表单模型重置为{}实际上无法更改模型的URL，因为它尚未设置。

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

虽然将单个字段分配给""作为简单表单的解决方法，但对于包含许多字段的更复杂表单而言，它很快变得很麻烦。

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

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

Answer 1

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

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

Answer 2

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

我认为当变量变得未定义时，事情变得混乱，它不会再被更新......它应该与验证的工作原理（docs link）深深地联系起来（{{3}}）

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

PS：您可以在网络应用中为所有表单回收resetImplicitly：）

Answer 3

在类似的问题中尝试了几个答案后没有成功，这对我有用。

在我的控制器中：

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

只需按一下ng-click或任何你想要的方式打电话。

干杯

Answer 4

Thing is标签的类型为＆＃34; url＆＃34;意思是如果用户将专门输入有效的网址，则只会设置模型的值

如果用户将显着重置它，这意味着将模型值设置为＆＃34;＆＃34;将再次使文本框为空。

看起来它正在设置值但实际上没有，所以当你将它的值设置为＆＃34;＆＃34; .Angular会将模态值设置为＆＃34;＆＃34; 让我们再看一个例子：put replace＆＃34; text＆＃34;用＆＃34;电子邮件＆＃34;

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

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

Answer 5

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

这里有一个很好的例子：

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

Answer 6

只有在有效的情况下，网址表单字段才会传递到模型中。因此，如果表单中包含invlaid-url条目，则不会为模型分配范围变量，并且通过为模型分配空对象来清除表单条目仍将保留UI前端的值。

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

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

Answer 7

纳克单击= “FORMDATA = {};”

就这样给出，

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

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

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

7 个答案: