Angular新增/编辑表单唯一校验问题：编辑时无法保存

编辑场景下，唯一校验器会把当前编辑记录的字段值判定为重复（因为数据库里本来就存在这条记录），导致校验失败无法提交表单。核心是校验器需要区分新增/编辑状态，编辑时排除当前记录的ID。

1. 改造自定义唯一校验器 #

让校验器支持传入当前编辑的记录ID，在校验时排除该记录：

import { AbstractControl, ValidationErrors, AsyncValidatorFn } from '@angular/forms';
import { BeneficiarioService } from './beneficiario.service';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

export function uniqueCedulaValidator(service: BeneficiarioService, existingId?: number): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    const cedula = control.value;
    if (!cedula) return of(null); // 空值不触发校验

    // 调用服务时传递排除ID，让后端忽略当前编辑记录
    return service.checkCedulaUnique(cedula, existingId).pipe(
      map(isUnique => isUnique ? null : { cedulaDuplicada: true })
    );
  };
}

2. 更新服务层校验方法 #

在beneficiario.service.ts中新增支持排除ID的校验接口：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class BeneficiarioService {
  private apiUrl = '/api/beneficiarios';

  constructor(private http: HttpClient) {}

  // 新增带排除ID的校验方法
  checkCedulaUnique(cedula: string, excludeId?: number): Observable<boolean> {
    let queryParams = `cedula=${cedula}`;
    if (excludeId) queryParams += `&excludeId=${excludeId}`;
    return this.http.get<boolean>(`${this.apiUrl}/check-cedula?${queryParams}`);
  }

  // 其他现有方法（getBeneficiario、updateBeneficiario等）...
}

3. 组件中区分新增/编辑状态 #

修改add-edit-beneficiario.ts，根据路由参数判断模式，给校验器传递对应参数：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { BeneficiarioService } from './beneficiario.service';
import { uniqueCedulaValidator } from './validators/unique-cedula.validator';

@Component({
  selector: 'app-add-edit-beneficiario',
  templateUrl: './add-edit-beneficiario.html',
})
export class AddEditBeneficiarioComponent implements OnInit {
  beneficiarioForm = this.fb.group({
    id: [null],
    cedula: ['', [Validators.required], []], // 先留空异步校验器，后续初始化
    // 其他表单字段...
  });
  isEditMode = false;
  editId?: number;

  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private beneficiarioService: BeneficiarioService
  ) {}

  ngOnInit(): void {
    this.editId = Number(this.route.snapshot.paramMap.get('id'));
    if (this.editId) {
      this.isEditMode = true;
      // 加载编辑数据并初始化校验器
      this.beneficiarioService.getBeneficiario(this.editId).subscribe(data => {
        this.beneficiarioForm.patchValue(data);
        // 传入当前编辑ID，让校验器排除该记录
        this.beneficiarioForm.get('cedula')?.setAsyncValidators([
          uniqueCedulaValidator(this.beneficiarioService, this.editId)
        ]);
        // 触发一次校验，避免初始状态报错
        this.beneficiarioForm.get('cedula')?.updateValueAndValidity({ emitEvent: false });
      });
    } else {
      // 新增模式，直接设置无排除ID的校验器
      this.beneficiarioForm.get('cedula')?.setAsyncValidators([
        uniqueCedulaValidator(this.beneficiarioService)
      ]);
    }
  }

  onSubmit(): void {
    if (this.beneficiarioForm.valid) {
      const request$ = this.isEditMode 
        ? this.beneficiarioService.updateBeneficiario(this.beneficiarioForm.value)
        : this.beneficiarioService.createBeneficiario(this.beneficiarioForm.value);
      
      request$.subscribe(() => {
        // 提交成功后的跳转/提示逻辑
      });
    }
  }
}

4. 后端接口调整（核心） #

确保后端check-cedula接口在接收到excludeId时，查询数据库排除该ID的记录：
示例SQL（以MySQL为例）：

SELECT COUNT(*) FROM beneficiarios WHERE cedula = ? AND id != ?;

若返回0则表示字段唯一，返回大于0则表示重复。

在组件中添加值变化监听，只有当用户修改了字段值时才触发校验：

// 组件中新增变量保存初始值
private initialCedula?: string;

// 加载编辑数据时保存初始值
this.beneficiarioService.getBeneficiario(this.editId).subscribe(data => {
  this.initialCedula = data.cedula;
  // ... 其他初始化代码
});

// 监听cedula值变化，仅当值与初始值不同时触发校验
this.beneficiarioForm.get('cedula')?.valueChanges.pipe(
  filter(cedula => cedula !== this.initialCedula),
  debounceTime(300)
).subscribe(() => {
  this.beneficiarioForm.get('cedula')?.updateValueAndValidity();
});

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