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

Question

我有一个小提琴设置，当我点击一个重置按钮它应该清除输入控件，这似乎工作，但不是当输入type='url'

Here is the fiddler

是否存在我不理解的问题。

当我设置

$scope.myform = {};

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

任何人都知道为什么？

Answer 1

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

您可以输入有效值进行测试。重置按钮将起作用。如果输入的值无效，则不会。

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

Answer 2

因为您需要在http://www.abc.com这样的第二个框中放置一个有效的网址，然后重置按钮才会生效。

Answer 3

为了正确更新视图/模型，我建议您明确重置模型的属性，如下所示：

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

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

希望它有所帮助。