Angular响应式表单实现唯一数据验证：重复输入禁用提交按钮

要实现输入值已存在时禁用提交按钮，核心是给响应式表单控件添加自定义异步验证器，结合表单状态控制按钮禁用状态。以下是具体步骤：

1. 编写自定义异步验证器 #

因为需要检查现有表格数据（可能是本地数组或后端返回），异步验证器适合这种需要等待数据校验的场景。创建验证器函数返回AsyncValidatorFn：

import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, debounceTime } from 'rxjs/operators';

// 针对本地表格数据的验证器
export function uniqueValueValidator(existingValues: string[]): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    // 空值直接通过验证
    if (!control.value?.trim()) return of(null);

    // 防抖300ms，避免输入过程中频繁校验
    return of(control.value.trim()).pipe(
      debounceTime(300),
      map(value => {
        // 忽略大小写检查重复
        const isDuplicate = existingValues.some(item => 
          item.toLowerCase() === value.toLowerCase()
        );
        return isDuplicate ? { duplicate: '该值已存在' } : null;
      })
    );
  };
}

如果你的表格数据来自后端接口，修改验证器调用服务即可：

import { DataService } from '../services/data.service';
import { switchMap } from 'rxjs/operators';

export function uniqueValueValidator(dataService: DataService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    if (!control.value?.trim()) return of(null);

    return of(control.value.trim()).pipe(
      debounceTime(300),
      switchMap(value => 
        dataService.checkIfValueExists(value).pipe(
          map(isDuplicate => isDuplicate ? { duplicate: '该值已存在' } : null)
        )
      )
    );
  };
}

2. 在组件中配置表单 #

将验证器绑定到响应式表单的目标控件上，同时保留必要的同步验证（比如必填）：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { uniqueValueValidator } from './validators/unique-value.validator';
// 如果用服务校验，注入DataService
// import { DataService } from './services/data.service';

@Component({
  selector: 'app-unique-form',
  templateUrl: './unique-form.component.html'
})
export class UniqueFormComponent {
  myForm: FormGroup;
  // 模拟表格中的现有数据
  existingTableData = ['Apple', 'Banana', 'Orange'];

  constructor(
    private fb: FormBuilder,
    // private dataService: DataService
  ) {
    this.myForm = this.fb.group({
      inputValue: [
        '',
        [Validators.required], // 同步必填验证
        // 本地数据校验：传入现有表格数组
        [uniqueValueValidator(this.existingTableData)],
        // 后端校验：传入服务实例
        // [uniqueValueValidator(this.dataService)]
      ]
    });
  }

  onSubmit() {
    // 提交逻辑
    console.log(this.myForm.value);
  }
}

3. 模板中绑定状态控制按钮 #

通过表单的valid和pending状态判断是否禁用提交按钮，同时显示重复提示：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div>
    <label>输入内容：</label>
    <input type="text" formControlName="inputValue" placeholder="请输入">
    
    <!-- 显示重复错误提示 -->
    <span class="error" *ngIf="myForm.get('inputValue')?.hasError('duplicate') && myForm.get('inputValue')?.touched">
      {{ myForm.get('inputValue')?.errors?.duplicate }}
    </span>
    <!-- 显示必填提示 -->
    <span class="error" *ngIf="myForm.get('inputValue')?.hasError('required') && myForm.get('inputValue')?.touched">
      此项为必填
    </span>
  </div>

  <!-- 表单有效且无异步验证pending时，按钮可用 -->
  <button type="submit" [disabled]="!myForm.valid || myForm.pending">
    提交
  </button>
</form>

关键说明 #

• myForm.pending：异步验证器正在校验时，表单处于pending状态，此时按钮需保持禁用，避免用户重复提交。
• 防抖处理：通过debounceTime减少频繁校验（尤其是后端接口场景），提升用户体验。
• 大小写忽略：根据业务需求调整是否需要忽略大小写，若不需要则去掉.toLowerCase()。

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