AngularJS setPristine 重置表單

Oluwafisayo Oluwatayo 2023年1月30日

Angular Angular Form

在 AngularJS 中如何將表單重置為 $setPristine 狀態
まとめ

作為開發人員要習慣的一件事是用於描述某些功能的各種行話。這樣的例子是諸如 $setPristine 狀態和 $dirty 狀態的函式。

為了更好地理解 $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 模組。最後，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;
}

此處演示

まとめ

將表單設定回其原始狀態有助於向網路使用者展示他們訪問的網站關注細節；它還將網站描述為乾淨的。

此外，當我們將表單重置為原始狀態時，我們會重置模型，這會提高網站的整體效能，因為專案包更輕，因為沒有儲存任何不必要的內容。

作者： Oluwafisayo Oluwatayo

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.

在 AngularJS 中如何將表單重置為 $setPristine 狀態

まとめ

相關文章 - Angular Form

在 AngularJS 中如何將表單重置為 `$setPristine` 狀態