AngularJS setPristine でフォームをリセット
開発者として慣れるべきことの 1つは、いくつかの機能を説明するために使用されるさまざまな専門用語です。そのような例は、$setPristine 状態や $dirty 状態のような関数です。
$setPristine 状態の意味をよりよく理解するために、$dirty 状態と比較します。
Web ユーザーがページにアクセスしてフォームに入力する必要がある場合、ユーザーがフォームフィールドに入力するとすぐに、そのフィールドは $dirty 状態になります。ユーザーがそのフォームフィールドに入力する前は、フォームフィールドは変更されていないため、フォームは $setPristine 状態になっています。
$setPristine 状態は、ユーザーがフォームに入力して[送信]をクリックしたときに便利です。そのフォームフィールドをリセットして、ユーザーのデータをクリアします。次に、この関数を起動して実行する方法を見てみましょう。
AngularJS でフォームを $setPristine 状態にリセットする方法
まず、いくつかの単語を入力する入力フィールドを含む HTML 構造を作成しましょう。次に、リセットボタンが入力フィールドをクリアし、クリーンな状態に戻します。
フォームをダーティな状態から元の状態に戻すこともできます。
<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>
次に、プロジェクトの JavaScript セクションに進みます。まず、フォームをリセットするとモデルもリセットする必要があるため、モデルをリセットするメソッドをコントローラーに提供する必要があります。
また、プロジェクトに resettableform モジュールを含めます。最終的に、JavaScript ファイルは次のようになります。
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);
この時点で、コードスニペットに従っている場合は、すべて正常に機能するはずです。この CSS スニペットをコードに含めて、物事を美しくすることができます。
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;
}
まとめ
フォームを元の状態に戻すと、アクセスした Web サイトが詳細に注意を払っていることを Web ユーザーに示すのに役立ちます。また、Web サイトをクリーンなものとして示しています。
さらに、フォームを元の状態にリセットすると、モデルがリセットされます。これにより、不要なものが何も保存されないため、プロジェクトバンドルが軽量化されるため、Web サイトの全体的なパフォーマンスが向上します。
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