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

我有一个AngularJS表单，其中包括一个

url

类型的字段。后者很重要，因为这会强制相应的输入为有效的URL

在某些条件下（例如，关闭带有此类窗体的模式对话框），我希望以编程方式清除该窗体。为此，我实现了方法

reset

，它通过设置

$scope.formData={}

基本上清除了相应的表单模型。因此，它将表单模型设置为一个新的空白对象

虽然该赋值清除呈现的HTML表单中的所有有效的字段，但它不会清除无效的字段，就像一个无效的URL一样。例如，如果用户将提供无效的输入

ht://t/p

作为URL，则不会从呈现表单中删除该输入

我认为这是因为任何无效的URL都不会被模型反映出来——这样一个无效的URL不会“进入”模型，因为它不会通过

NgModelController\#$parsers

数组中的验证。因此，在模型中，根本没有URL。因此，将表单模型重置为

{}

实际上无法更改模型的URL，因为它尚未设置

但是，如果方法

reset

显式设置字段

$scope.formData.url=”“

，则无效url将被正确清除（至少呈现的表单不再显示它）。这是由模型中URL的显式更改引起的。但是，现在，模型变量

formData.url

包含空字符串（这并不奇怪），而通过使用

={}

，所有字段都将

未定义

虽然将单个字段分配给
“
可以作为简单表单的变通方法，但对于包含许多字段的更复杂表单，它很快就会变得很麻烦

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

我创建了一个Plunker，您可以在其中检查并运行显示上述效果的完整示例。
我认为此解决方案相当优雅：

最大的区别是模型对象的初始化

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

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

PS：您可以在webapp:）中为所有表单隐式回收
reset
。
将按钮类型指定为reset。这不仅会调用ngClick函数，还会清除HTML表单的内容

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

重置
ng click=“formData={}

就这样给,

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

（1）重置完整数据：formData={}

直接在ng中重置表单数据单击自身。
问题是标记的类型为“url”，意思是
若用户将专门输入一个有效的url，那个么只有它将设置模型的值

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

它看起来像是在设置值，但实际上不是，因此当您将其值设置为“”时，Angular将将模式值设置为“”
让我们再举一个例子：将“文本”替换为“电子邮件”



网址：



在上面的代码中，如果输入无效电子邮件，则不会设置电子邮件型号的值
 您可能需要在原始状态下复制模型，并在重置时将模型设置为原始状态

这里有一个很好的例子：

只有url表单字段有效时，才会将其传递到模型中。因此，如果表单中存在invlaid url条目，则范围变量不会与模型一起分配，并且通过向模型分配空对象来清除表单条目仍将在UI前端保留该值

最好的替代方法是将与表单数据关联的模型分配为null。类似的答案如下：

在尝试了几个类似问题的答案后，这对我来说很有效

在我的控制器中：

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

只需点击一下或以任何方式打电话

干杯
清洁表单的概念是指在调用某个操作后，将表单返回到初始状态（也就是页面重新加载后的状态）。在您的情况下，
$scope.formData={}
@MaximShoustin我想重置模型和视图。使用
$scope.formData={}
，只重置模型。这方面有进展吗？也咬了我一口。有关于如何解决这个问题的消息吗？对于无效字段，我也面临同样的问题。事实并非如此。它仅适用于有效的输入。有一个类似$viewValue的东西，它不同于您要删除的$modelValue。这对于完全重置表单非常有用。不幸的是，在我的情况下，我想将表单（和模型）重置为初始状态，例如，我的复选框应该在初始选中。如果我单击您保存了我的一天的
，则视图不考虑在ngClick处理程序中将模型值设置为true！！！我使用了显式模式，强制为空字符串：$scope.filter.code=”“我认为这个方法在版本1.8.2下不起作用。我把plnkr换成了那个版本，它不再工作了。
$scope.cleanForm = function() {
  $scope.myFormName.$rollbackViewValue();
};