如何无需setTimeout将Angular模板驱动表单初始标记为touched状态？

嘿，我有几个靠谱的方案帮你搞定这个问题，不用再依赖setTimeout啦！

方案一：用AfterViewChecked钩子+执行标志 #

这种方法能确保表单完全初始化后再标记为touched，而且不会重复执行操作：

首先在组件里获取表单实例，然后结合AfterViewChecked钩子来处理：

import { Component, ViewChild, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewChecked {
  @ViewChild('f') form!: NgForm;
  // 用这个标志确保只执行一次标记
  private hasMarkedForm = false;
  comment = '';

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewChecked(): void {
    if (this.form && !this.hasMarkedForm) {
      // 标记表单为已触碰
      this.form.control.markAsTouched();
      this.hasMarkedForm = true;
      // 手动触发变更检测，确保错误提示及时显示
      this.cdr.detectChanges();
    }
  }
}

你的模板代码保持不变就行：

<form novalidate #f="ngForm">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" name="myname" required [(ngModel)]="comment">
    <mat-error>Is required lol</mat-error>
  </mat-form-field>
</form>

为啥这个方法好使？因为AfterViewChecked会在视图和子视图的变更检测都完成后触发，这时候表单控件已经完全初始化了，调用markAsTouched绝对安全。加个标志位是为了避免每次变更检测都重复执行，毕竟我们只需要初始化时标记一次。

方案二：用Promise.resolve()微任务 #

如果你觉得上面的标志位有点麻烦，这个更简洁的方法也能行：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('f') form!: NgForm;
  comment = '';

  ngAfterViewInit(): void {
    // 利用微任务队列，在当前变更检测周期结束后执行
    Promise.resolve().then(() => {
      this.form.control.markAsTouched();
    });
  }
}

这个方法不用标志位，因为Promise.resolve()会把任务放到微任务队列，等当前的Angular变更检测周期跑完再执行，这时候表单肯定已经初始化好了，完全不用等定时器。

内容的提问来源于stack exchange，提问作者Antoniossss