web-dev-qa-db-fra.com

Angularjs form reset

J'ai une fonction de réinitialisation en mode angulaire pour effacer tous les champs d'un formulaire. Si je fais quelque chose comme:

<a href="#" ng-click="resetForm()">reset</a>

$scope.resetForm = function() {
  $scope.someForm = {};
}

Tout fonctionne bien. Mais je souhaite utiliser cette fonction pour plusieurs formulaires sur le site. Si je passe l'objet formulaire de la manière suivante:

<a href="#" ng-click="resetForm(someForm)">reset</a>

$scope.resetForm = function(form) {
  $scope.form = {};
}

Alors ça ne marchera pas. Quelqu'un peut-il m'expliquer pourquoi cela se produirait?

javascriptformsangularjs
12
sturoid

Vous avez 2 problèmes:

  • Vous n'accédez pas à la variable transmise, accédez quand même à la variable someForm de la portée actuelle.
  • Lorsque vous passez un paramètre à la fonction, il est passé par référence. Même lorsque vous utilisez form = {}, cela ne fonctionne pas car il ne change que la référence du paramètre, pas la référence du passé dans someForm.

Essayer:

$scope.resetForm = function(form) {
  //Even when you use form = {} it does not work
  form.fieldA = null;
  form.fieldB = null;
  ///more fields
}

Ou

$scope.resetForm = function(form) {
      //Even when you use form = {} it does not work
      angular.copy({},form);
    }

au lieu de:

$scope.resetForm = function(form) {
  $scope.form = {};
}

Dans votre dossier, je vois que vous ne séparez pas la vue du modèle. Vous devez le faire pour séparer les préoccupations et éviter les problèmes pouvant survenir lorsque vous effacez tous les champs (y compris les champs de l'objet de formulaire DOM).

<form name="form2" ng-controller="SecondController">
      <label for="first_field">First Field</label>
      <input ng-model="form2Model.first_field" />
      <br />
      <label for="second_field">Second Field</label>
      <input ng-model="form2Model.second_field" />
      <br />

      <a href="#" ng-click="secondReset(form2Model)">Reset the form</a>
    </form>

http://plnkr.co/edit/x4JAeXra1bP4cQjIBld0?p=preview

20
Khanh TO

vous pouvez essayer ceci: Déployez votre fonction dans la réinitialisation du bouton de formulaire, de cette façon ...

<input type ="button" ng-click="Object.field1 = null; ObjectN.fieldN = null;"  value="Reset" />
0
Davide Trevisan

Vous pouvez aussi faire:

form.fieldA = undefined;

Cela fonctionne très bien pour les boutons radio et les cases à cocher.

0
SriniDev