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