AngularJS: pulsante di abilitazione sul cambio di input modulo

Question

Ho un'app con molte impostazioni nelle pagine di formato lungo. Ci si aspetta di andare alle pagine per visualizzare le impostazioni correnti o per aggiornarle.

Vorrei fare in modo che il pulsante "aggiorna" sia abilitato solo se qualcuno modifica effettivamente gli ingressi correnti.

Il mio approccio ingenuo sarebbe quello di aggiungere un attributo ng cambio ad ogni ingresso che imposta il flag 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> 

ma questo sembra noioso e ripetitivo (abbiamo un sacco di opzioni), e speravo qualcosa di semplice (qualcosa come "form. $ hasChanged" ...)

Answer 1

Invece di impostare un flag n cambiamento di qualsiasi input di modulo, è necessario utilizzare la proprietà angolare incorporata $dirty nell'oggetto controller del modulo. Indica se l'utente ha interagito con gli elementi del modulo.

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

Utilizzando $pristine bandiera si potrebbe fare

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

Allo stesso modo se avete validatori sul modulo si potrebbe anche fare uso di $valid proprietà, ad esempio disattivare il pulsante se il modulo non è valido o incontaminata

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