如何检查 Angular 10 中的表单或控件是否未触及？

在 Angular 10 中，表单和控件是非常重要的部分。当我们与表单交互时，有时我们需要知道某个控件是否被触及并进行相应的处理。本文将介绍如何检查 Angular 10 中的表单或控件是否未触及。

什么是“未触及”？

在 Angular 10 中，当用户与表单进行交互时，每个表单控件都有一个“触及”状态。当用户在控件中输入任何内容时，控件将被视为“触及”。如果用户没有在控件中输入任何内容，则该控件将是“未触及”。

检查控件是否未触及非常重要，因为它可以帮助我们决定是否需要应用某些验证或者显示错误信息。

如何检查控件是否未触及？

在 Angular 10 中，我们可以通过访问控件的“触及”属性来检查控件是否已触及。在控件被触及时，“触及”属性将是 true。反之，如果控件未被触及，则该属性将是 false。

下面是一个简单的例子：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  template: `
    <input type="text" [formControl]="myFormControl">
  `
})
export class MyComponent {
  myFormControl = new FormControl();

  constructor() {
    console.log(this.myFormControl.untouched); // 输出 true
    this.myFormControl.setValue('Hello World');
    console.log(this.myFormControl.untouched); // 输出 false
  }
}

在上面的代码中，我们通过创建一个名为 myFormControl 的 FormControl，并打印其 untouched 属性。在初始情况下，该属性将为 true。然后，我们使用 myFormControl.setValue('Hello World') 方法将控件的值设置为“Hello World”。因此，我们再次打印 untouched 属性，此时它将变成 false。

如何根据未触及状态应用样式？

当控件未被触及时，我们可以根据它的未触及状态来应用样式。例如，我们可以将其背景颜色设置为灰色：

input:untouched {
  background-color: #F0F0F0;
}

当控件未被触及时，其背景颜色将变为灰色。

总结

在 Angular 10 中，我们可以通过访问控件的“触及”属性来检查控件是否已触及。如果控件未被触及，则该属性将是 false。我们可以根据控件的未触及状态来应用样式或执行其他相应的处理。