AngularJS 中 !$pristine 与 $dirty 之间有什么区别

作者:编程家 分类: angularjs 时间:2025-08-08

AngularJS中的表单验证是非常重要的,它可以确保用户输入的数据是有效和合法的。在AngularJS中,有两个非常重要的属性来判断表单的状态,即`$pristine`和`$dirty`。

`$pristine`表示表单是否处于初始状态,也就是用户还没有进行任何操作。当表单刚加载完成或者重置后,`$pristine`属性就会被设置为`true`。相反,`$dirty`表示表单是否已被修改,即用户已经进行了某些操作。当用户对表单进行了任何修改后,`$dirty`属性就会被设置为`true`。

下面我们来看一个实际的例子来理解`$pristine`和`$dirty`之间的区别。假设我们有一个简单的注册表单,包含姓名和邮箱两个字段,用户需要填写这些信息才能完成注册。我们可以使用`$pristine`和`$dirty`属性来确定用户是否已经填写了必要的信息。

html

在上面的代码中,我们给每个输入框添加了`required`属性,这样可以确保用户必须填写这些信息。在注册按钮上,我们使用了`ng-disabled`指令来禁用按钮,当表单无效或者处于初始状态时,按钮将被禁用。

接下来,我们可以在控制器中添加一些逻辑来处理表单的提交:

javascript

app.controller('myController', function($scope) {

$scope.user = {};

$scope.submitForm = function() {

// 处理表单提交的逻辑

};

});

在上面的代码中,我们定义了一个`submitForm`函数来处理表单的提交逻辑。当用户点击注册按钮时,该函数会被调用。

## `$pristine`和`$dirty`的应用场景

`$pristine`和`$dirty`属性的应用场景非常广泛。通过判断这两个属性,我们可以控制表单中的一些逻辑和交互。以下是一些常见的应用场景:

### 显示错误信息

当用户填写了不合法的数据时,我们可以根据`$dirty`属性来显示相应的错误信息。在上面的例子中,如果用户不填写姓名或者邮箱,这些输入框将被标记为`$dirty`,我们可以通过`myForm.name.$dirty`或者`myForm.email.$dirty`来判断是否显示错误信息。

html

请填写姓名

请填写有效的邮箱

### 禁用提交按钮

当表单处于初始状态或者无效状态时,我们可以禁用提交按钮,以避免用户提交无效的数据。在上面的例子中,我们使用了`myForm.$invalid || myForm.$pristine`来判断是否禁用注册按钮。

### 重置表单

当用户点击重置按钮时,我们可以将表单重置为初始状态,即将`$pristine`属性设置为`true`。在上面的例子中,我们可以添加一个重置按钮,并在点击时调用`myForm.$setPristine()`来重置表单。

html

##

在AngularJS中,`$pristine`和`$dirty`属性是用来判断表单状态的非常有用的工具。通过判断这两个属性,我们可以根据表单的状态来显示错误信息、禁用提交按钮或者重置表单。这些属性帮助我们更好地控制和管理表单的交互和验证。