Angular响应式表单：回车触发时如何获取正确的untouched状态？

问题场景 #

以下是一个Angular响应式表单的简单输入框示例：

HTML代码

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="box" (keyup.enter)="dosomething()">
  <button>Submit</button>
</form>

TypeScript代码

dosomething() {
  this.cd.detectChanges(); // private cd: ChangeDetectorRef
  console.log(this.form.untouched);
} 
onSubmit() {
  console.log('from submit: ', this.form.untouched);
}

问题：在输入框中输入内容后按下回车键，控制台打印form.untouched为true；但点击提交按钮时打印为false。由于输入框已被触碰，期望回车时也能得到false。

原因分析 #

Angular表单的touched状态默认仅在控件失去焦点时更新。按下回车键时输入框并未失焦，因此表单仍保持untouched状态；而点击提交按钮时输入框会自动失焦，触发状态更新为touched。

解决方案 #

直接在回车事件处理方法中手动标记表单或控件为已触碰状态即可：

方法1：标记整个表单为已触碰

修改dosomething()方法，调用markAsTouched()触发表单状态更新，无需手动调用detectChanges()：

dosomething() {
  this.form.markAsTouched();
  console.log(this.form.untouched); // 此时输出false
}

方法2：仅标记单个输入控件为已触碰

如果只需更新单个控件的状态，可针对具体控件操作：

dosomething() {
  this.form.get('box')?.markAsTouched();
  console.log(this.form.untouched); // 输出false
}

修改后完整TS示例 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      box: ['']
    });
  }

  dosomething() {
    this.form.markAsTouched();
    console.log(this.form.untouched);
  }

  onSubmit() {
    console.log('from submit: ', this.form.untouched);
  }
}

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