web-dev-qa-db-fra.com

Utiliser $ dirty dans angularjs pour vérifier chaque fois qu'un formulaire est édité

J'essayais de vérifier chaque fois que mon formulaire était modifié en écrivant certains champs de celui-ci. J'ai lu que $ dirty devrait fonctionner pour cette tâche, mais je ne peux pas comprendre ce qui me manque ici:

<!DOCTYPE html>
<html lang="en">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form name = "myForm" novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p> is Form dirty? {{isDirty}}<p>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
    $scope.isDirty = $scope.myForm.$dirty;
});
</script>

</body>
</html>

J'essaie de rendre le drapeau isDirty à true chaque fois que l'utilisateur modifie le formulaire. Merci

javascriptangularjsformsform-editing
22
DarkAngeL

Il manque des attributs name dans vos champs de formulaire qui n'activent pas la validation de formulaire pour ces champs. Vous devez ajouter un nom unique pour chaque champ afin qu'il obtienne ajouter ces champs dans l'objet myForm

Balisage 

  <form name="myForm" novalidate>
    First Name:<br>
    <input type="text" name="firstName" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" name="lastName" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>

De plus, vous accédez à myForm objet qui n'est rien d'autre qu'un objet de formulaire, je ne serai pas disponible jusqu'à ce que DOM soit rendu, $scope.myForm sera simplement indéfini au moment de l'initialisation du contrôleur, si vous voulez vraiment accéder à $scope.myForm du contrôleur, vous devez mettre ce code dans $timeout qui s'exécutera $timeout code de fonction dans le prochain cycle de résumé.

  $timeout(function(){
    $scope.isDirty = $scope.myForm.$dirty;
  });

Mise à jour

Il n'est pas nécessaire de maintenir un indicateur séparé isDirty (cela nécessiterait de changer l'élément séparé isDirty indicateur pour refléter toute modification de myForm.$dirty flag.) Je vous suggère plutôt d'utiliser $scope.myForm.$dirty directement comme indicateur. Utilisez donc l'expression myForm.$dirty, et cet indicateur changera lorsque le formulaire sera sale.

Plunkr de travail

35
Pankaj Parkar