如何进行验证和使用 ..$setPristine();以 AngularJS 的形式？

Question

我有以下代码：

            <form class="form"
                  data-ng-submit="modalSubmit(modal.data)"
                  id="modal-body"
                  name="modalForm"
                  novalidate>

这很有效，当我单击提交类型的按钮时，会调用 modalSubmit 函数。

但是我想在我的控制器中执行此操作：

$scope.modalForm.$setPristine();  

但它给出了一个错误提示：

has no method '$setPristine'

如何将表单设置为原始？我确实尝试添加data-ng-form="modalForm"，但后来我得到了 一条消息，说明重复指令名称的效果。

我尝试将表单元素更改为 DIV，但点击提交按钮后没有调用 函数

这是一个示例（由其他用户修改），它显示了我正在尝试做的事情，即将值设置为原始值：

plnkr.co/edit/LNanJdAggMLIgxii0cfv?p=preview

Answer 1

它已经在这个link 中实现了，你可以使用它，就像它在 plnkr 链接中所展示的那样。 从上面的描述可以看出，$setPristine 只是改变了表单的状态（从而重置了应用于表单中每个控件的 css）。

如果你想清除每个控件的值，那么你需要在代码中为 each 做。

Answer 2

您没有做错任何事情，唯一的问题是您引用了旧版本的 angular，其中 $setPristine() 不是功能。 $setPristine() 是在 1.1.+ 中添加的，因此请参考更新版本的 angular，您就可以开始使用了。看到它在this plunk 中工作，使用 1.2.+。

如果您无法升级，那么一个肮脏的解决方法是遍历表单中的所有输入并手动设置它们的 $dirty 和 $pristine 值：

$scope.mp = function() {
  $scope.mainForm.$pristine=true;//clean main form
  $scope.mainForm.$dirty=false;
  angular.forEach($scope.mainForm,function(input){//clean all input controls
    if (input !== undefined && input.$dirty !== undefined) {
      input.$dirty=false;
      input.$pristine=true;
    }
  });
}

Answer 3

首先，您的 Angular 版本较旧，1.2.12 是 CDN 上的最新稳定版本。但由于正在进行的 HTML5 验证，即使它也不允许使用 $setPristine。

最大的问题是你在字段上使用了required 而不是ng-required。浏览器正在为您进行表单验证，而不是 Angular。您还可以将novalidate 属性添加到表单标签中。

http://plnkr.co/edit/l1mUCceSFMFFZWgGgL6u?p=preview