AngularJS:启用表单输入更改按钮

AngularJS: enable button on form input change

本文关键字：按钮 输入 表单 启用 AngularJS      更新时间：2023-09-26

我有一个应用程序，在长格式页面中有很多设置。您需要转到页面以查看当前设置或更新这些设置。

我想这样做，只有当有人真正更改了当前输入时，"更新"按钮才会启用。

我天真的方法是在每个设置enableButton标志的输入中添加一个ng-change属性

<form name='form' ng-submit="submit()">
   <input type="sometype" ng-model='something1' ng-change="formChanged=true"></input>
   ...
   <input ng-model='somethingN' ng-change="formChanged=true"></input>
   <button ng-disabled="!formChanged" type="submit" />
</form>

但这似乎是乏味和重复的（我们有很多选择），并且希望有一些简单的东西（比如"form.$hasChanged"…）

您应该在表单控制器对象上使用内置的angular $dirty属性，而不是设置任何表单输入的标志n更改。它告诉用户是否与表单的元素进行了交互。

<form name='form' ng-submit="submit()">
   <input name="some1" type="sometype" ng-model='something1' ></input>
   ...
   <input name="some2" ng-model='somethingN' ></input>
   <button ng-disabled="!form.$dirty" type="submit" />
</form>

使用$pristine标志可以进行

<button ng-disabled="form.$pristine" type="submit" />

类似地，如果表单上有验证器，您也可以使用$valid属性，例如，如果表单无效或原始，则禁用按钮

<button ng-disabled="form.$pristine|| form.$invalid" type="submit" />
相关文章：