web-dev-qa-db-fra.com

erreur de réinitialisation de formulaire angularjs

j'essaie de faire un formulaire avec des validations en utilisant angularjs et jusqu'à présent, j'ai fait du bon travail. Mais lorsque je commets mon bouton de réinitialisation, tous les champs sont réinitialisés, à l'exception des messages d'erreur que je reçois de ma partie validation. Comment puis-je me débarrasser de tous les champs et messages d'erreur lorsque je réinitialise mon formulaire?.

C'est comme ça quand j'appuie sur mon bouton de réinitialisation

enter image description here

c'est mon code

<div class="page-header"><center><h2>Give us your Feedback</h2></center></div>

    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>

        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }">
            <label>Name*</label>
            <input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block">
                <font color="#009ACD">You name is required.</font>
            </p>
        </div>

         <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty  }">
            <label>Email</label>
            <input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required >
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">
                <font color="#009ACD">Enter a valid email.</font>
            </p>
        </div>

        <!-- USERNAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }">
            <label>Description</label>
            <input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required>
            <font color="white">
                <p ng-show="userForm.username.$error.minlength" class="help-block">
                    <font color="#009ACD">Description is too short.</font>
                </p>
                <p ng-show="userForm.username.$error.maxlength" class="help-block">
                    <font color="#009ACD">Description is too long.</font>
                </p>
            </font>
        </div>

        <div class="col"style="text-align: center">
            <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
                type="reset"
                ng-click="reset()" padding-top="true"
            >
                Reset
            </button>


            <button class="button button-block button-positive"  style="display: inline-block;width:100px "
                ng-click="submit()"
                padding-top="true"
            >
                Submit
            </button>
        </div>

    </form>
</div>

Mon contrôleur

.controller('ContactCtrl', function($scope,$state,$ionicPopup, $timeout) {
    $scope.showfeedback = function() {
        $state.go('app.sfeedback');
    };

    $scope.submitForm = function(isValid) {
        $scope.submitted = true;

        // check to make sure the form is completely valid
        if (!isValid) {
            var alertPopup = $ionicPopup.alert({
                title: 'Invalid data entered!',
            });
        } else {
            var alertPopup = $ionicPopup.alert({
                title: 'Feedback submitted',
            });
        }
    };

    $scope.reset = function() {
        var original = $scope.user;
        $scope.user= angular.copy(original)
        $scope.userForm.$setPristine()
    };
})
javascripthtmlangularjsvalidation
39
CraZyDroiD
var original = $scope.user;

lors de la réinitialisation:

$scope.user= angular.copy(original);
$scope.userForm.$setPristine();

retirer

type='reset' in  <button>

voici le Angular Documentation pour les contrôleurs de formulaire.

41
K.Toress

Utilisez ce qui suit pour réinitialiser l'état sale

$scope.form.$setPristine();

Utilisez ce qui suit pour réinitialiser et effacer la validation

$scope.form.$setValidity();
32
Thakhani Tharage

Il existe une documentation API sur le FormController .

Cela m'a permis de constater qu'il existe d'autres méthodes à appeler, telles que:

$setUntouched() - fonction que j'utilisais si l'utilisateur s'est concentré sur le champ, puis qu'il a quitté le champ, cette fonction est effacée lorsque vous l'exécutez.

J'ai créé une fonction de réinitialisation de formulaire simple que vous pouvez également utiliser.

// Set the following in your controller for the form/page.
// Allows you to set default form values on fields.
$scope.defaultFormData = { username : 'Bob'}
// Save a copy of the defaultFormData
$scope.resetCopy = angular.copy($scope.defaultFormData);
// Create a method to reset the form back to it's original state.
$scope.resetForm =  function() {
    // Set the field values back to the original default values
    $scope.defaultFormData = angular.copy($scope.resetCopy);
    $scope.myForm.$setPristine();
    $scope.myForm.$setValidity();
    $scope.myForm.$setUntouched();
    // in my case I had to call $apply to refresh the page, you may also need this.
    $scope.$apply();
}

Dans votre formulaire, cette configuration simple vous permettra de réinitialiser le formulaire.

<form ng-submit="doSomethingOnSubmit()" name="myForm">
    <input type="text" name="username" ng-model="username" ng-required />
    <input type="password" name="password" ng-model="password" ng-required />
    <button type="button" ng-click="resetForm()">Reset</button>
    <button type="submit">Log In</button>
</form>
24
Shannon Hochkins

J'ai eu le même problème et utilisé le code suivant pour réinitialiser complètement le formulaire:

$scope.resetForm = function(){

    // reset your model data
    $scope.user = ...

    // reset all errors
    for (var att in  $scope.userForm.$error) {
        if ($scope.userForm.$error.hasOwnProperty(att)) {
            $scope.userForm.$setValidity(att, true);
        }
    }

    // reset validation's state
    $scope.userForm.$setPristine(true);
};
3
Siggen

J'y suis allé avec...

$scope.form.$setPristine();
$scope.form.$error = {};

Se sent hacky ... mais beaucoup sur angular fait.

En plus ... c'était la seule chose qui fonctionnait.

2
Calvin

Pour moi en utilisant $setPristine pour réinitialiser le formulaire est un hack. La vraie solution est de le garder comme il se doit:

<button type="reset" ng-click="reset()"></button>

puis en angulaire:

var original = angular.copy($scope.user);
$scope.reset = function() {
   $scope.user = angular.copy(original);
};

et c'est tout.

2
Lorenzo Meriggi

J'ai gardé le type="reset" Dans mon bouton. Ce que j’ai fait était la ng-click="resetForm(userForm)" (en utilisant userFrom pour correspondre à votre exemple) et le contrôleur définit resetForm() comme

scope.resetForm = function(controller) {
  controller.$commitViewValue();
  controller.$setPristine();
};

Voici ce qui se passe:

  1. Lorsque le bouton de réinitialisation est cliqué, il ramènera les valeurs d'origine spécifiées par l'attribut value de l'entrée
  2. La $commitViewValue() forcera l'écriture de tout ce qui est présent dans la vue sur le $modelValue De chaque champ (inutile d'itérer manuellement), sans cela le dernier $modelValue Resterait être stocké plutôt que réinitialisé.
  3. La $setPristine() réinitialisera les autres champs de validation et soumis.

Dans mon angular-bootstrap-validator , j'avais déjà le FormController en tant que tel, je n'avais pas besoin de passer dans le formulaire lui-même.

1
Archimedes Trajano

Donnez-nous vos commentaires

<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>


    <!-- NAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }">
        <label>Name*</label>
        <input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required>
        <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block"><font color="#009ACD">You name is required.</font></p>


    </div>

     <!-- EMAIL -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty  }">
        <label>Email</label>
        <input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required >
        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block"><font color="#009ACD">Enter a valid email.</font></p>
    </div>

    <!-- USERNAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }">
        <label>Description</label>
        <input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required>
        <font color="white"><p ng-show="userForm.username.$error.minlength" class="help-block"><font color="#009ACD">Description is too short.</font></p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block"><font color="#009ACD">Description is too long.</font></p>
    </div>

    <div class="col"style="text-align: center">
        <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
        type="reset"
        ng-click="reset()"padding-top="true">Reset</button>


        <button class="button button-block button-positive"  style="display: inline-block; width:100px" ng-click="submit()"padding-top="true">Submit</button>
        </div>

</form>
1
Kishore Babu

Si vous n'avez pas de maître (modèles dynamiques à partir du serveur) et que vous souhaitez réinitialiser le formulaire mais uniquement la partie liée du modèle, vous pouvez utiliser cet extrait:

  function resetForm(form){
    _.forEach(form, function(elem){
      if(elem !== undefined && elem.$modelValue !== undefined){
        elem.$viewValue = null;
        elem.$commitViewValue();
      }
    });
  }

Et puis vous pouvez l’utiliser avec un reset button ainsi:

<button type="reset" ng-click="resetForm(MyForm);MyForm.$setValidity();">reset</button>
1
Szabolcs Páll

Utilisez ceci

<button type="button" ng-click='resetForm()'>Reset</button>

Dans le contrôleur

$scope.resetForm = function(){
   $scope.userForm.$dirty = false;
   $scope.userForm.$pristine = true;
   $scope.userForm.$submitted = false;
};

Ça marche pour moi

1
vs7

Dans ma forme

<form angular-validator-submit="submitReview()" name="formReview"  novalidate angular-validator>

 <input type="text" name="Rating" validate-on="Rating" class="form-control"
   ng-model="Review.Rating" required-message="'Enter Rating'" required>
  <button type="button" ng-click="reset()">Cancel</button>
 </form>


app.controller('AddReview', function ($scope) {

    $scope.reset= function () {
        $scope.formReview.reset() 
    };
});

il suffit d'appeler $scope.formReview.reset() où formReview est le nom de mon formulaire.

0
ujjaval