angularjs - 如果表单控件具有无效数据，$setPristine() 将无法正常工作

Question

我正在尝试使用 $setPristine() 重置表单。

$scope.resetDataEntryForm = function() {
    $scope.dataEntryForm.$setPristine();
    $scope.pr = {};
};

如果所有输入控件都处于有效状态，则工作正常。其中一种输入类型是 URL。例如，如果我在单击“重置”时有无效的 URL 值。上面的代码是否应该重置 URL 输入字段的内容并将错误标记为 false。我需要这个来进行验证。

要进行正确的重置，我必须手动重置所有错误标志

$scope.resetDataEntryForm = function() {
    $('#dataEntryForm')[0].reset();
    $scope.dataEntryForm.$setPristine();
    $scope.dataEntryForm.name.$error.required = true;
    $scope.dataEntryForm.site.$error.required = true;
    $scope.dataEntryForm.site.$error.url = false;
    $scope.pr = {};
};

任何人都可以建议使用 angular.js 重置表单的正确方法吗？

Answer 1

我不知道它是否有意，但 $setPristine() 不会更改 $error 对象。

这是Form上setPristine的源代码

    form.$setPristine = function () {
        element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
        form.$dirty = false;
        form.$pristine = true;
        forEach(controls, function(control) {
          control.$setPristine();
        });
      };

这是对 Control(输入元素等)的代码调用

    this.$setPristine = function () {
      this.$dirty = false;
      this.$pristine = true;
      $element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
    };  

在我看来，您必须自己重置 $error 对象

PS:代码取自AngularJs版本1.2.*，您可以在Github上查看当前版本https://github.com/angular/angular.js/blob/291d7c467fba51a9cb89cbeee62202d51fe64b09/src/ng/directive/form.js