在 Angular 10 中检查表单或控件是否被触摸

在 Angular 10 中，可以使用 ngModel 指令或 FormControl 类来创建表单控件。当用户与表单控件交互时，会有一些属性发生变化，其中一个属性是 touched，它表示控件是否被触摸过。

当用户在输入框中输入、修改、删除相关信息后，该输入框就会被触摸。这时可以检查该控件是否已被触摸，以便进一步确定表单验证的行为。

使用 ngModel 指令

使用 ngModel 指令创建表单控件后，可以通过以下方式检查控件是否已被触摸：

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

@Component({
  selector: 'app-form',
  template: `
    <form>
      <label>Name: <input [(ngModel)]="name" name="name" required></label>
      <br>
      <button (click)="checkIfTouched()">Check if touched</button>
      <br>
      <span *ngIf="isTouched">The name field has been touched.</span>
    </form>
  `
})
export class FormComponent {
  name = '';
  isTouched = false;

  checkIfTouched() {
    this.isTouched = (this.name !== undefined) && this.name.touched;
  }
}

在模板中，使用 [(ngModel)] 指令绑定输入框的值，并设置 name 属性和 required 属性。通过按钮点击事件来检查输入框是否被触摸，如果 name.touched 属性为 true，则表示输入框已被触摸。

注意事项：

• 使用 ngModel 指令时需要引入 FormsModule 模块；
• 如果这个 isTouched 值没有被触发更新，可以加上 ChangeDetectorRef 来检测；
• 如需同时检查多个控件是否被触摸，可以分别检查每个控件的 touched 属性，并通过逻辑运算符逐一判断。

使用 FormControl 类

如果使用 FormControl 类创建表单控件，则可以通过以下方法检查控件是否已经被触摸：

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

@Component({
  selector: 'app-form',
  template: `
    <form>
      <label>Name: <input [formControl]="nameControl"></label>
      <br>
      <button (click)="checkIfTouched()">Check if touched</button>
      <br>
      <span *ngIf="isTouched">The name field has been touched.</span>
    </form>
  `
})
export class FormComponent {
  nameControl = new FormControl('');
  isTouched = false;

  checkIfTouched() {
    this.isTouched = this.nameControl.touched;
  }
}

在模板中，使用 [formControl] 指令绑定输入框的 FormControl 实例。通过按钮点击事件来检查输入框是否被触摸，如果 nameControl.touched 属性为 true，则表示输入框已被触摸。

注意事项：

• 使用 FormControl 类时需要引入 ReactiveFormsModule 模块；
• 与 ngModel 指令不同，使用 FormControl 类来创建表单控件可以更好地处理表单控件的状态变化，以及更方便地调用表单控件的方法。

结论

在 Angular 10 中，我们可以使用 ngModel 指令或 FormControl 类来创建表单控件，并使用对应的属性来检查表单控件是否被触摸，以便进一步确定表单验证的行为。