如何通过代码为表单控件分配CSS类及Bootstrap输入框空值验证问题

这个问题我之前也碰到过，核心原因是Angular表单控件的状态判断逻辑没覆盖到**touched但pristine**的场景——点击字段后不输入就离开，控件只会标记为touched（已触碰），但还是pristine（未修改）；而输入后再删除内容，控件会同时变成touched和dirty（已修改）。你的当前样式逻辑大概率只在dirty状态下才触发错误类，所以才会出现两种场景的差异。

下面是具体的解决方案：

1. 调整ngClass的判断条件，包含touched状态 #

在模板中，修改ngClass的判断逻辑，确保只要控件验证不通过，且已触碰（touched）或表单已提交（submitted），就应用is-invalid类：

<!-- 假设你用的是响应式表单 -->
<input 
  type="text" 
  formControlName="requiredField"
  [ngClass]="{
    'is-invalid': requiredFieldControl.invalid && (requiredFieldControl.touched || yourFormGroup.submitted),
    'is-valid': requiredFieldControl.valid && (requiredFieldControl.touched || yourFormGroup.submitted)
  }"
>

在组件.ts文件中，提前获取控件的引用会让模板更简洁：

// 组件类中
get requiredFieldControl() {
  return this.yourFormGroup.get('requiredField');
}

这样不管是点击字段后直接离开（触发touched），还是表单提交后，只要字段为空，就会立即显示Bootstrap的红色错误样式。

2. 可选：设置表单控件的updateOn触发时机 #

如果希望控件的验证状态在失去焦点时就更新，可以在创建表单控件时指定updateOn: 'touched'：

// 组件.ts文件中
yourFormGroup = this.formBuilder.group({
  requiredField: ['', {
    validators: Validators.required,
    updateOn: 'touched' // 验证状态在失去焦点时更新
  }]
});

这个设置能让控件的验证结果更早同步，配合上面的ngClass逻辑，体验会更流畅。

3. 模板驱动表单的适配方案 #

如果你用的是模板驱动表单，逻辑类似，借助ngForm和控件的状态来判断：

<form #myForm="ngForm">
  <input 
    type="text" 
    name="requiredField"
    [(ngModel)]="formData.requiredField"
    required
    [ngClass]="{
      'is-invalid': myForm.controls.requiredField.invalid && (myForm.controls.requiredField.touched || myForm.submitted),
      'is-valid': myForm.controls.requiredField.valid && (myForm.controls.requiredField.touched || myForm.submitted)
    }"
  >
</form>

核心思路都是一致的：不要只依赖dirty状态来触发错误样式，把touched和submitted状态也纳入判断条件，就能覆盖所有需要显示错误的场景。

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