Question

<form role="form" id="myForm" name="myForm">
  <input class="form-control" ng-model="firstName" type="text" />
  <input class="form-control" ng-model="lastName" type="text" /> 

<button class="btn btn-info" ng-disabled="myForm.$pristine">cancel</button
<button class="btn btn-primary" ng-disabled="myForm.$pristine">update</button
</form>

假设表中有数据列表。当我单击一个数据时，会弹出一个模态数据（在示例中为firstName和lastName）。

在模态中有一个EDIT按钮，当你点击它时，会出现另外两个按钮 - CANCEL和UPDATE。我想将更新按钮设置为禁用，而FORM中没有发生任何更改。

使用$pristine我找到了解决方案，但有一个问题：

当我尝试编辑数据并决定取消它时（通过重置当前数据），下次单击EDIT时UPDATE按钮已启用，即使没有更改数据呢。

有没有解决方案？

Answer 1

取消取消将表格设置为原始。这会将$ pristine设置为true，这将禁用按钮。

<button class="btn btn-info" ng-disabled="myForm.$pristine" ng-click="myForm.$setPristine()">cancel</button

对于取消按钮，我在控制器中添加一个功能来重置所有字段，然后将表单设置回原始状态，这有效地重置了表单。

如何在表单中没有更改时禁用按钮[更新]

1 个答案: