2015-05-06 14 views
10

assumendo una data forma, come <form name="myForm">, è abbastanza facile da guardare per la validità, l'errore, stato di sporcizia, ecc con un semplice orologio:orologio modello di modulo per le modifiche

$scope.$watch('myForm.$valid', function() { 
    console.log('form is valid? ', $scope.myForm.$valid); 
}); 

Tuttavia, non sembra essere un modo semplice per vedere se qualsiasi dato input in questo modulo è cambiato. guardare in profondità in questo modo, non funziona:

$scope.$watch('myForm', function() { 
    console.log('an input has changed'); //this will never fire 
}, true); 

$watchCollection va solo un livello profondo, il che significa che avrei dovuto creare un nuovo orologio per ogni ingresso. Non ideale

Che cos'è un modo elegante per visualizzare un modulo per le modifiche su qualsiasi input senza dover ricorrere a più orologi o posizionare ng-change su ciascun input?

+3

possibile duplicato di [AngularJS 1.3 - \ 'ng-change \' -like funzionalità per l'intero modulo] (http://stackoverflow.com/questions/28677638/angularjs-1-3-ng-change-like- funzionalità-per-l'-intero-modulo) – DTing

+0

La soluzione direttiva in quella domanda funziona, ma non è quello che avevo in mente (cioè non elegante, dal momento che richiede la sfocatura per funzionare). Idealmente mi piacerebbe che questo funzionasse in modo simile a quanto angolare imposta internamente un modulo a $ valid o $ error immediatamente dopo che un input secondario cambia in modo appropriato. – Duncan

risposta

7

Per quanto riguarda la possible duplicate e il tuo commento:

La soluzione direttiva in questione funziona, ma non è quello che avevo in mente (vale a dire non elegante, in quanto richiede sfocatura per funzionare).

Funziona se si aggiunge true come terzo parametro per il vostro $watch:

$scope.$watch('myFormdata', function() { 
    console.log('form model has been changed'); 
}, true); 

ulteriori informazioni consultare il docs.

Working Fiddle (log della console di controllo)


Un altro modo più angolare sarebbe quello di utilizzare di angolare $pristine. Questa proprietà booleana sarà impostata su false una volta di manipolare il modello modulo:

Fiddle

+0

In effetti sono consapevole che funziona in questo modo assumendo che i campi del modulo condividano tutti un oggetto padre comune. E posso usare un orologio in questo modo - speravo che ci sarebbe stato un modo per guardare usando il nome del modulo, piuttosto che il modello a cui ogni ingresso è associato a – Duncan

+0

Dipende se hai bisogno del nuovo valore.Se vuoi solo ora che qualcosa è cambiato, potresti usare '$ pristine'. – DonJuwe

+0

È nel contesto di un salvataggio automatico, quindi mentre '' '$ pristine''' o' '' $ dirty''' sarebbero utili per la prima modifica, non sono utili per ogni modifica successiva a meno che non dovessi impostare manualmente il valore incontaminato/sporco su ogni salvataggio che sembra un po 'hacky per me. Probabilmente dovrò accontentarmi di una profonda osservazione sul modello che gli input condividono. – Duncan

3

Sulla base della mia esperienza con i miei forme (nuovo dev, ma lavorare con angolare per un po 'di tempo), il modo elegante per guardare un modulo per le modifiche in realtà non usa affatto alcun tipo di dichiarazione di controllo.
Usa il valore $ pristine o $ sporco angolare booleano incorporato e quei valori cambieranno automaticamente su qualsiasi campo di input o casella di controllo.
Il problema è: non cambierà il valore se si aggiunge o si giunge da una matrice che mi ha bloccato per un po '.
La soluzione migliore per me era quella di eseguire manualmente $scope.MyForm.$setDirty(); ogni volta che aggiungevo o rimuovevo dai miei diversi array. Ha funzionato come un fascino!

Problemi correlati