web-dev-qa-db-fra.com

Modèle de formulaire de surveillance pour les changements

En supposant une forme donnée telle que <form name="myForm">, il est assez facile de surveiller la validité, l'erreur, l'état sale, etc. à l'aide d'une simple montre:

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

Cependant, il ne semble pas y avoir de moyen facile de voir si une entrée donnée dans ce formulaire a changé. Regarder en profondeur comme ça, ne fonctionne pas:

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

$watchCollection ne va qu'à un niveau, ce qui signifie que je devrais créer une nouvelle montre pour chaque entrée. Pas idéal.

Quelle est une manière élégante de regarder un formulaire pour les changements sur n'importe quelle entrée sans avoir à recourir à plusieurs montres, ou en plaçant ng-change sur chaque entrée?

angularjsformsangularjs-watch
11
Duncan

Concernant le doublon possible et votre commentaire:

La solution directive dans cette question fonctionne, mais ce n'est pas ce que j'avais à l'esprit (c'est-à-dire pas élégante, car elle nécessite du flou pour fonctionner).

Cela fonctionne si vous ajoutez true comme troisième paramètre pour votre $watch:

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

Pour plus d'informations, consultez le docs .

Working Fiddle (consultez le journal de la console)

Un autre plus angular serait d'utiliser le $pristine. Cette propriété booléenne sera définie sur false une fois que vous aurez manipulé le modèle de formulaire:

Violon

7
DonJuwe

Sur la base de mon expérience avec mes formulaires (nouveau développeur, mais en travaillant avec Angular pendant un certain temps maintenant), la manière élégante de surveiller un formulaire pour les modifications est en fait de ne pas utiliser n'importe quel type de déclaration watch à tout en fait.
Utilisez la fonction intégrée Angular boolean $ pristine ou $ dirty et ces valeurs changeront automatiquement dans n'importe quel champ de saisie ou case à cocher.
Le hic est: il ne changera pas la valeur si vous ajoutez ou épissez un tableau qui m'a bloqué pendant un certain temps.
La meilleure solution pour moi était de faire manuellement $scope.MyForm.$setDirty(); chaque fois que j'ajoutais ou supprimais de mes différents tableaux. A fonctionné comme un charme!

4
leviathon