AngularJS setPristine이 양식 재설정
개발자가 익숙해져야 할 것 중 하나는 일부 기능을 설명하는 데 사용되는 다양한 전문 용어입니다. 예를 들면 $setPristine state 및 $dirty state와 같은 기능이 있습니다.
$setPristine 상태가 의미하는 바를 더 잘 이해하기 위해 $dirty 상태와 비교할 것입니다.
웹 사용자가 페이지를 방문하여 양식을 작성해야 할 때 사용자가 양식 필드에 입력하자마자 해당 필드는 $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 모듈을 포함할 것입니다. 결국 자바스크립트 파일은 아래와 같을 것입니다.
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;
}
결론
양식을 원래 상태로 되돌리면 방문한 웹 사이트가 세부 사항에 주의를 기울이고 있음을 웹 사용자에게 표시하는 데 도움이 됩니다. 그것은 또한 웹 사이트를 깨끗한 것으로 묘사합니다.
또한 양식을 원래 상태로 재설정할 때 모델을 재설정하여 불필요한 것이 저장되지 않기 때문에 프로젝트 번들이 더 가벼워지기 때문에 웹사이트의 전체 성능이 향상됩니다.
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