2015-05-06 7 views
10

eine vorgegebene Form wie <form name="myForm"> Angenommen, es ist leicht genug, um ihre Gültigkeit zu beobachten, Fehler, schmutzigen Zustand, etc., um eine einfache Uhr mit:Uhr Form Modell für Änderungen

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

Allerdings ist es nicht angezeigt, Eine einfache Möglichkeit zu beobachten, ob sich irgendeine Eingabe in diesem Formular geändert hat. Tief beobachten, wie so, funktioniert nicht:

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

$watchCollection geht nur eine Ebene tiefer, was bedeutet, würde ich eine neue Uhr für jeden Eingang anlegen. Nicht ideal.

Was ist eine elegante Möglichkeit, ein Formular für Änderungen an jeder Eingabe zu beobachten, ohne auf mehrere Uhren zurückgreifen zu müssen oder ng-change auf jeden Eingang zu setzen?

+3

mögliches Duplikat von [AngularJS 1.3 - \ 'ng-change \' - ähnliche Funktionalität für das gesamte Formular] (http://stackoverflow.com/questions/28677638/angularjs-1-3-ng-change-like- Funktionalität-für-die-Gesamt-Form) – DTing

+0

Die Richtlinie Lösung in dieser Frage funktioniert, aber es ist nicht, was ich im Sinn hatte (dh nicht elegant, da es Unschärfe erfordert, um zu arbeiten). Idealerweise möchte ich, dass dies auf ähnliche Weise funktioniert, wenn angular intern eine Form auf $ valid oder $ error setzt, unmittelbar nachdem sich eine untergeordnete Eingabe entsprechend geändert hat. – Duncan

Antwort

7

In Bezug auf die possible duplicate und Ihren Kommentar:

Die Richtlinie Lösung in dieser Frage arbeitet, aber es ist nicht das, was ich im Sinn hatte (das heißt nicht elegant, da es Unschärfe benötigt, um zu arbeiten).

Es funktioniert, wenn Sie true als dritter Parameter für Ihre $watch hinzufügen:

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

Weitere Informationen zur docs sehen.

Working Fiddle (Kontrollkonsolenprotokoll)


Eine weitere kantige Weise$pristine Winkel zu gebrauchen wären. Diese Boolesche Eigenschaft wird auf false gesetzt werden, sobald Sie das Formular Modell manipulieren:

Fiddle

+0

In der Tat ist mir bewusst, dass es so funktioniert, vorausgesetzt Ihre Formularfelder teilen alle ein gemeinsames Elternobjekt. Und ich kann eine Uhr auf diese Weise verwenden - ich hoffte in idealer Weise, dass es eine Möglichkeit gäbe, mit dem Formularnamen zuzusehen, anstatt das Modell, an das jeder Eingang gebunden ist – Duncan

+0

Es hängt davon ab, ob Sie den neuen Wert benötigen.Wenn du nur willst, dass sich etwas geändert hat, solltest du '$ makellos 'verwenden. – DonJuwe

+0

Es ist im Zusammenhang mit einer automatischen Speicherung, also während '' 'pristine''' oder' '' schmutzige''' '$' 'nützlich für die erste Änderung sind, sind sie nicht für jede nachfolgende Änderung nützlich, es sei denn, ich würde manuell einstellen der makellose/schmutzige Wert bei jeder Rettung, die mir ein bisschen hacky erscheint. Wahrscheinlich muss ich mich mit dem Modell zufriedengeben, das die Inputs teilen. – Duncan

3

Aufgrund meiner Erfahrung mit meinen Formen (neu Entwicklern, aber der Arbeit mit kantigem für eine Weile jetzt), die elegante Art und Weise zu sehen Ein Formular für Änderungen ist eigentlich überhaupt keine Art von Watch-Anweisung zu verwenden.
Verwenden Sie die integrierte Angular boolean $ pristine oder $ dirty, und diese Werte werden automatisch bei jedem Eingabefeld oder Kontrollkästchen geändert.
Der Catch ist: Es wird nicht den Wert ändern, wenn Sie hinzufügen oder aus einem Array spleißen, die mich für eine Weile ratlos hatte.
Die beste Lösung für mich war, manuell $scope.MyForm.$setDirty(); zu tun, wann immer ich von meinen verschiedenen Arrays hinzufügte oder entfernte. Arbeitete wie ein Charme!

Verwandte Themen