angularjs - AngularJS：再次将模型设置为 = {} 不会清除输入类型 ='url'

Question

我有一个提琴手设置，当我单击重置按钮时，它应该清除输入控件，这似乎有效但输入时无效type='url'

Here is the fiddler

是否有问题或我不理解的东西。

当我设置

$scope.myform = {};

这似乎清除了其他输入类型，但输入 type='url' 没有被清除。

有谁知道为什么？

Answer 1

当您在 input[type="url"] 中没有有效值时会出现您看到的问题。无效值仅保留在视图中（输入字段），并且不会被推送到 ng-model 内的范围变量。只有当值正确时，变量才会更新。

您可以通过输入一个有效值来测试它。重置按钮将起作用。如果您输入无效值，则不会。

您可以通过设置$scope.myform = null而不是$scope.myform = {}. 这将清空该字段，因为范围变量（表达式）将是未定义的。一旦您在任何字段中输入有效值，它将由 Angular 自动创建。

Answer 2

因为您需要在第二个框中输入一个有效的 url，http://www.abc.com所以重置按钮将起作用。

Answer 3

为了正确更新视图/模型，我建议您像这样显式重置模型的属性：

$scope.reset = function() {
    $scope.myform = {
        foo: '',
        bar: ''
    };
    $scope.formName.$setPristine();
};

将“myform”设置为空对象会删除其字段，但不会将它们设置为空字符串。很可能 Angular 的清理可能不会删除视图引用的值，因此会混淆应用程序的模型和视图状态。

希望它有所帮助。