将表单设置为$ pristine,但保持当前值

时间:2015-06-27 22:38:52

标签: javascript angularjs

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

当用户点击保存按钮(进行更改后)时,将发生AJAX保存,并且完成后需要考虑表单" pristine"再次,但保持当前值

我认为设置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. 如果没有,我需要做些什么才能让它发挥作用?

2 个答案:

答案 0 :(得分:2)

  。

<强>的FormController $ setPristine();

     

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

     

可以调用此方法来删除&#39; ng-dirty&#39; class并将表单设置为其原始状态(ng-pristine类)。此方法还将传播到此表单中包含的所有控件。

     

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

答案 1 :(得分:0)

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

你也可以在这样的标记中将表单的值设置为pristine,如

这是更新的代码和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

相关问题