将表单设置为 $pristine，但保留当前值

Question

我的用例是我需要根据用户是否更改了表单的值来启用/禁用保存按钮。

当用户点击保存按钮（进行更改后）时，将进行 AJAX 保存，完成后表单需要再次被视为“原始”，但保留当前值。

我认为设置 form.$pristine = true 会起作用，它在单击按钮后第一次这样做，但从那里编辑值不会将 $pristine 设置为 false。

示例插件：http://plnkr.co/edit/VX2R1bdGJFdzH3LEsNnB?p=preview

<form name="submitForm">
  <input ng-model="data.first" type="text" />
  <input ng-model="data.second" type="text" />
</form>
<button ng-click="saveForm()">Submit</button>
<div>Form pristine: {{submitForm.$pristine}}</div>

//In controller
$scope.saveForm = function(){
  $scope.submitForm.$pristine = true;
}

1. 还有其他方法吗？
2. 如果没有，我需要做什么才能使其正常工作？

Answer 1

FormController.$setPristine();

将表单设置为其原始状态。

可以调用此方法来删除“ng-dirty”类并将表单设置为其原始状态（ng-pristine 类）。此方法还将传播到此表单中包含的所有控件。

当我们想在保存或重置表单后“重复使用”表单时，将表单设置回原始状态通常很有用。

Answer 2

我建议在表单标签上使用 ng-submit，而不是使用 ng-click。 ng-submit 确保在调用 ng-submit 的事件处理程序之前提交所有视图模型更改。如果您将 ng-options 与 ng-model 一起使用，这将特别适用，您可能已设置选项以将模型设置为仅在特定时间或 onblur 后更新。

您也可以像这样在标记中提交时将表单的值设置为原始

这是更新的代码和 plunker。请注意，如果表单无效，则不会调用 ng-submit。这是使用 ng-submit 而不是 ng-click 的另一个优势。

  <form name="submitForm" ng-submit="saveForm();submitForm.$setPristine();">
      <input ng-model="data.first" type="text" />
      <input ng-model="data.second" type="text" />
       <button >Submit</button>
    </form>

http://plnkr.co/edit/2bWvPm9xNoVPFKYUhdUM?p=preview