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

Question

我有一个在长页面中有很多设置的应用程序。您应该去页面查看当前设置，或更新它们。

我想让它只有在有人实际更改当前输入时才启用“更新”按钮。

我天真的方法是为每个设置 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”......)

Answer 1

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

<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" />