将表单设置为$pure，但保持当前值

Set form as $pristine, but keep current values

本文关键字：设置 表单 pure      更新时间：2023-09-26

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

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

我认为设置form.$pristine = true会起作用，这是单击按钮后的第一次，但编辑其中的值不会将$pristine设置为false。

plunker示例：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. 如果没有，我需要做什么才能让它发挥作用

FormController$setPristine（）

将窗体设置为其原始状态。

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

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

我建议在表单标记上使用ng-submit，而不是使用ng-click。ng-submit确保在调用ng-subit的事件处理程序之前提交所有视图模型更改。这将特别适用于您将ng选项与ng模型一起使用的情况，其中您可能已设置选项以将模型设置为仅在特定时间或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

相关文章：