Reactive Forms字符串输入框实时数字校验需求咨询

核心思路 #

通过自定义校验器判断输入是否包含数字，配合设置表单控件的实时校验触发时机，再在模板中根据控件状态实时渲染错误提示。

具体实现步骤 #

1. 编写自定义数字校验器

创建一个校验函数，检查输入值是否包含数字，若包含则返回错误标记：

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

// 自定义校验器：禁止输入数字
export function noNumbersValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 用正则匹配是否存在数字
    const containsNumber = /\d/.test(control.value || '');
    return containsNumber ? { hasNumber: true } : null;
  };
}

2. 配置表单控件的实时校验

在创建FormGroup时，给目标输入控件添加自定义校验器，并设置updateOn: 'change'，让值一变化就触发校验（默认是提交时才校验）：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { noNumbersValidator } from './validators/no-numbers.validator';

@Component({
  selector: 'app-text-form',
  templateUrl: './text-form.component.html',
})
export class TextFormComponent {
  textForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.textForm = this.fb.group({
      userName: ['', {
        validators: [Validators.required, noNumbersValidator()],
        updateOn: 'change' // 关键：值变化时立即执行校验
      }]
    });
  }

  onSubmit() {
    if (this.textForm.valid) {
      // 处理表单提交逻辑
    }
  }
}

3. 模板中实时显示错误提示

在模板里绑定控件状态，当控件无效且已输入/已触碰时，根据错误类型显示对应提示：

<form [formGroup]="textForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>用户名：</label>
    <input type="text" formControlName="userName" placeholder="请输入文字">
    
    <!-- 实时错误提示 -->
    <div class="error-message" *ngIf="textForm.get('userName')?.invalid && (textForm.get('userName')?.dirty || textForm.get('userName')?.touched)">
      <span *ngIf="textForm.get('userName')?.errors?.['hasNumber']">请仅输入文字</span>
      <span *ngIf="textForm.get('userName')?.errors?.['required']">此字段不能为空</span>
    </div>
  </div>
  
  <button type="submit">提交</button>
</form>

关键说明 #

• updateOn: 'change'：这是实现实时校验的核心，覆盖了Reactive Forms默认的提交时校验逻辑。
• dirty/touched：避免页面加载时就显示错误提示，只有用户开始输入或点击过输入框后才触发显示。
• 自定义校验器可复用：如果多个输入框需要相同规则，直接引入该校验器即可。

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