AngularJS：启用按钮上的表单输入更改

Question

我有一个应用程序与长表单页面中的很多设置。您需要前往页面查看当前设置或更新它们。

我想这样做只有当有人实际改变当前输入时才启用“更新”按钮。

我幼稚的做法是一个NG-改变属性添加到每一个设置enableButton标志

<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

而不是设置一个标志n改变窗体的任何输入，你应该使用窗体控制器对象中$dirty属性中建立的角度。它告诉用户是否与表单的元素进行了交互。

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