AngularJS setPristine pour réinitialiser le formulaire
L’une des choses auxquelles les développeurs doivent s’habituer est le jargon utilisé pour décrire certaines fonctions. Un exemple de telles fonctions sont les états $setPristine et $dirty.
Pour mieux comprendre ce que signifie l’état $setPristine, nous allons le comparer à l’état $dirty.
Lorsqu’un internaute visite une page et doit remplir un formulaire, dès qu’il tape dans un champ du formulaire, ce champ est dans un état $dirty. Avant que l’utilisateur ne tape dans ce champ de formulaire, le formulaire est dans un état $setPristine car le champ de formulaire est intact.
L’état $setPristine est pratique lorsqu’un utilisateur remplit un formulaire et clique sur Soumettre, nous voulons que ce champ de formulaire soit réinitialisé et que les données de l’utilisateur soient effacées. Voyons maintenant comment rendre cette fonction opérationnelle.
Comment réinitialiser un formulaire à l’état $setPristine dans AngularJS
Tout d’abord, créons une structure HTML, incluant un champ de saisie où nous allons taper quelques mots. Ensuite, un bouton de réinitialisation effacera le champ de saisie, le ramenant à un état propre.
Nous pourrions également dire que nous allons ramener la forme de son état sale à son état vierge.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="form">
<input name="requiredField" ng-model="model.requiredField" required/> (Required, but no other validators)
<p ng-show="form.requiredField.$errror.required">Field is required</p>
<button ng-click="reset()">Reset form</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
</div>
</div>
Ensuite, nous nous dirigeons vers la section JavaScript de notre projet. Tout d’abord, nous devons fournir une méthode dans notre contrôleur qui réinitialisera le modèle, car une fois que nous avons réinitialisé le formulaire, nous devons également réinitialiser le modèle.
Aussi, nous allons inclure le module resettableform dans le projet. Au final, le fichier JavaScript ressemblera à ci-dessous.
var myApp = angular.module('myApp', ['resettableForm']);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.form.$setPristine();
$scope.model = '';
};
}
(function(angular) {
function indexOf(array, obj) {
if (array.indexOf) return array.indexOf(obj);
for ( var i = 0; i < array.length; i++) {
if (obj === array[i]) return i;
}
return -1;
}
function arrayRemove(array, value) {
var index = indexOf(array, value);
if (index >=0)
array.splice(index, 1);
return value;
}
var PRISTINE_CLASS = 'ng-pristine';
var DIRTY_CLASS = 'ng-dirty';
var formDirectiveFactory = function(isNgForm) {
return function() {
var formDirective = {
restrict: 'E',
require: ['form'],
compile: function() {
return {
pre: function(scope, element, attrs, ctrls) {
var form = ctrls[0];
var $addControl = form.$addControl;
var $removeControl = form.$removeControl;
var controls = [];
form.$addControl = function(control) {
controls.push(control);
$addControl.apply(this, arguments);
}
form.$removeControl = function(control) {
arrayRemove(controls, control);
$removeControl.apply(this, arguments);
}
form.$setPristine = function() {
element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
form.$dirty = false;
form.$pristine = true;
angular.forEach(controls, function(control) {
control.$setPristine();
});
}
},
};
},
};
return isNgForm ? angular.extend(angular.copy(formDirective), {restrict: 'EAC'}) : formDirective;
};
}
var ngFormDirective = formDirectiveFactory(true);
var formDirective = formDirectiveFactory();
angular.module('resettableForm', []).
directive('ngForm', ngFormDirective).
directive('form', formDirective).
directive('ngModel', function() {
return {
require: ['ngModel'],
link: function(scope, element, attrs, ctrls) {
var control = ctrls[0];
control.$setPristine = function() {
this.$dirty = false;
this.$pristine = true;
element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
}
},
};
});
})(angular);
À ce stade, si nous avons suivi les extraits de code, tout devrait bien fonctionner. Nous pourrions inclure cet extrait CSS dans notre code pour embellir les choses.
input.ng-dirty.ng-invalid {
background-color: red;
}
input[required].ng-pristine {
background-color: yellow;
}
input[required].ng-dirty.ng-valid {
background-color: green;
color: white;
}
Conclusion
Remettre un formulaire dans son état d’origine permet de montrer à un internaute que le site Web qu’il a visité porte une attention particulière aux détails ; il décrit également le site Web comme propre.
De plus, lorsque nous réinitialisons un formulaire à son état d’origine, nous réinitialisons le modèle, ce qui améliore les performances globales du site Web car le groupe de projets est plus léger puisque rien d’inutile n’est stocké.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn