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` 状态