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>

但这似乎很乏味和重复(我们有很多选择),并希望有一些简单的东西(类似"形式.$ hasChanged"......)

Answer 1

您应该$dirty在窗体控制器对象上使用angular built in 属性,而不是设置任何表单输入的标志.它告诉用户是否与表单的元素进行了交互.

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