this.onTouched 用法示例 angular中

`this.onTouched` 是 Angular 中的一个生命周期钩子方法，它通常用于模板驱动表单验证。当你手动触发了输入元素的 `blur` 或者 `touch` 事件，或者当组件完成数据绑定过程（即用户离开该字段），`onTouched` 方法会被调用。这个方法的主要用途是在表单验证时确认用户的交互是否已经完成。

下面是一个简单的示例：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="exampleInput" (ngModelChange)="onTouched()" />
      <button type="submit">Submit</button>
    </form>

    <div *ngIf="myForm.get('exampleInput').touched && myForm.get('exampleInput').invalid">
      Input is required.
    </div>
  `,
})
export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      exampleInput: ['', Validators.required],
    });
  }

  onTouched() {
    // 在这里检查输入是否满足条件，并可能更新校验状态
    if (!this.myForm.controls.exampleInput.value) {
      this.myForm.markAsInvalid('exampleInput', { message: 'Input is required.' });
    }
  }
}

在这个例子中，当用户离开输入框(`(ngModelChange)="onTouched()"`)，`onTouched()`会被触发。如果输入为空且验证失败，会显示错误提示。