AngularJS setPristine zum Zurücksetzen des Formulars
Eines der Dinge, an die sich Entwickler gewöhnen müssen, ist der verschiedene Jargon, der verwendet wird, um einige Funktionen zu beschreiben. Ein Beispiel dafür sind Funktionen wie der Zustand $setPristine und der Zustand $dirty.
Um besser zu verstehen, was der Zustand $setPristine bedeutet, vergleichen wir ihn mit dem Zustand $dirty.
Wenn ein Webbenutzer eine Seite besucht und ein Formular ausfüllen muss, befindet sich dieses Feld in einem $dirty-Zustand, sobald der Benutzer etwas in ein Formularfeld eingibt. Bevor der Benutzer etwas in dieses Formularfeld eingibt, befindet sich das Formular in einem $setPristine-Zustand, da das Formularfeld unberührt bleibt.
Der Status $setPristine ist praktisch, wenn ein Benutzer ein Formular ausfüllt und auf Senden klickt. Wir möchten, dass dieses Formularfeld zurückgesetzt und die Daten des Benutzers gelöscht werden. Sehen wir uns nun an, wie Sie diese Funktion zum Laufen bringen.
So setzen Sie ein Formular in AngularJS auf den Zustand $setPristine zurück
Lassen Sie uns zunächst eine HTML-Struktur erstellen, einschließlich eines Eingabefelds, in das wir einige Wörter eingeben werden. Dann löscht eine Reset-Taste das Eingabefeld und bringt es in einen sauberen Zustand zurück.
Wir könnten auch sagen, dass wir die Form von ihrem schmutzigen Zustand in ihren ursprünglichen Zustand zurückversetzen werden.
<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>
Als nächstes gehen wir in den JavaScript-Bereich unseres Projekts. Zuerst müssen wir eine Methode in unserem Controller bereitstellen, die das Modell zurücksetzt, denn sobald wir das Formular zurücksetzen, müssen wir auch das Modell zurücksetzen.
Außerdem werden wir das Modul resettableform in das Projekt aufnehmen. Am Ende sieht die JavaScript-Datei wie folgt aus.
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);
Wenn wir an dieser Stelle den Codeschnipseln gefolgt sind, sollte alles gut funktionieren. Wir könnten dieses CSS-Snippet in unseren Code einfügen, um die Dinge zu verschönern.
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;
}
Fazit
Das Zurücksetzen eines Formulars in seinen ursprünglichen Zustand zeigt einem Webbenutzer, dass die von ihm besuchte Website auf Details achtet. Es zeigt auch die Website als sauber.
Wenn wir ein Formular auf seinen ursprünglichen Zustand zurücksetzen, setzen wir außerdem das Modell zurück, was die Gesamtleistung der Website verbessert, da das Projektpaket leichter ist, da nichts Unnötiges gespeichert wird.
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