Angular响应式表单如何校验已存在的重要性编号？

完全可以实现，Angular响应式表单支持自定义异步校验器，刚好适配这种需要和已有数据集/后端数据比对的唯一性校验场景。

实现步骤 #

• 优先准备已存在的重要性编号集合：可以提前拉取全量已有的编号存储在前端，也可以在校验时直接调用后端接口查询是否存在，两种方式都可以通过异步校验器实现。

异步校验器会在所有同步校验器（必填、格式校验等）全部通过后才触发，不会影响基础校验的执行效率，你也可以加防抖逻辑减少不必要的校验请求。

1. 自定义异步校验器 #

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

// 入参为已存在的重要性编号数组，编辑场景下记得排除当前编辑条目的自身编号
export function uniquePriorityNumberValidator(existedNumbers: number[]): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    const inputValue = Number(control.value?.trim());
    // 空值直接返回通过，单独用内置的Required校验器处理必填逻辑
    if (!inputValue) {
      return of(null);
    }
    // 如果需要调用后端接口，把这里的比对逻辑换成HttpClient请求即可
    return of(existedNumbers.includes(inputValue) ? { uniquePriority: true } : null).pipe(
      debounceTime(300),
      distinctUntilChanged()
    );
  };
}

2. 给表单控件绑定校验器 #

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// 假设你已经提前获取到全量已存在的编号
const existedPriorityNumbers: number[] = [1,2,3,5];

export class UserFormComponent {
  userForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      // 其他表单控件...
      priorityNumber: [
        null,
        // 同步校验：必填、仅允许正整数
        [Validators.required, Validators.pattern(/^[1-9]\d*$/)],
        // 异步校验：唯一性校验
        [uniquePriorityNumberValidator(existedPriorityNumbers)]
      ]
    });
  }
}

3. 模板层展示错误提示 #

<form [formGroup]="userForm">
  <!-- 其他表单字段 -->
  <input type="number" formControlName="priorityNumber" placeholder="请输入重要性编号">
  <div *ngIf="userForm.get('priorityNumber')?.touched && userForm.get('priorityNumber')?.errors">
    <span *ngIf="userForm.get('priorityNumber')?.errors?.['required']">* 请输入重要性编号</span>
    <span *ngIf="userForm.get('priorityNumber')?.errors?.['pattern']">* 请输入正整数</span>
    <span *ngIf="userForm.get('priorityNumber')?.errors?.['uniquePriority']">* 该编号已存在，请重新输入</span>
  </div>
</form>

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