AngularJS setPristine para restablecer el formulario
Una de las cosas a las que hay que acostumbrarse como desarrolladores es la jerga que se utiliza para describir algunas funciones. Un ejemplo de esto son funciones como el estado $setPristine y el estado $dirty.
Para comprender mejor qué significa el estado $setPristine, lo compararemos con el estado $dirty.
Cuando un usuario de la web visita una página y tiene que completar un formulario, tan pronto como el usuario escribe en un campo de formulario, ese campo está en un estado $sucio. Antes de que el usuario escriba en ese campo de formulario, el formulario se encuentra en un estado $setPristine porque el campo de formulario no se ha tocado.
El estado $setPristine es útil cuando un usuario completa un formulario y hace clic en Enviar, queremos que ese campo de formulario se restablezca y se borren los datos del usuario. Ahora veamos cómo poner en marcha esta función.
Cómo restablecer un formulario al estado $setPristine en AngularJS
Primero, creemos una estructura HTML, incluyendo un campo de entrada donde escribiremos algunas palabras. Luego, un botón de reinicio borrará el campo de entrada y lo devolverá a un estado limpio.
También podríamos decir que devolveremos el formulario de su estado sucio a su estado prístino.
<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>
A continuación, nos dirigimos a la sección de JavaScript de nuestro proyecto. Primero, debemos proporcionar un método en nuestro controlador que restablezca el modelo porque una vez que restablecemos el formulario, también debemos restablecer el modelo.
Además, incluiremos el módulo resettableform en el proyecto. Al final, el archivo JavaScript se verá como se muestra a continuación.
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);
En este punto, si hemos seguido los fragmentos de código, todo debería funcionar bien. Podríamos incluir este fragmento de CSS en nuestro código para embellecer las cosas.
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;
}
Conclusión
Establecer un formulario de nuevo en su estado original ayuda a mostrar a un usuario web que el sitio web que visitó presta atención a los detalles; también muestra el sitio web como limpio.
Además, cuando restablecemos un formulario a su estado original, restablecemos el modelo, lo que mejora el rendimiento general del sitio web porque el paquete del proyecto es más liviano ya que no se almacena nada innecesario.
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