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

Question

我有一个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包含空字符串(嗯,不足为奇),而通过使用= {},所有字段都将是undefined相反的.

虽然将单个字段指定""为简单表单的解决方法,但对于包含许多字段的更复杂表单而言,它很快变得很麻烦.

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

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

Answer 1

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

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

Answer 2

我认为这个解决方案相当优雅：您的 plnkr 审查了
最大的区别是模型对象的初始化。

我认为当变量变得未定义时，事情就会变得混乱，它不再更新..它应该与验证的工作方式深入连接（veeeery）（文档链接）

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

PS：您可以resetImplicitly在网络应用程序中回收所有表单:)