如何让Angular响应式表单中的cnic成为唯一标识符？

1. 创建CNIC唯一性异步验证器 #

由于需要校验现有员工列表中的CNIC是否重复，我们需要编写异步验证器（即使数据存储在本地，异步验证器也更符合Angular表单验证的规范流程）。

在你的AddEditComponent中添加以下验证逻辑：

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

// ... 其他导入和组件代码

// 自定义异步验证器：检查CNIC是否已存在
private cnicUniqueValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    const cnic = control.value;
    if (!cnic) return of(null); // CNIC为空时跳过验证

    // 从LocalStateService获取现有员工列表
    return of(this._localStateService.getEmployees()).pipe(
      map(employees => {
        // 判断是否存在重复CNIC
        const isDuplicate = employees.some(emp => emp.cnic === cnic);
        return isDuplicate ? { cnicDuplicate: true } : null;
      })
    );
  };
}

2. 更新表单组配置 #

修改表单初始化代码，为CNIC字段添加required校验和自定义唯一性验证器，同时为其他必填字段补充对应校验规则：

constructor(private _fb: FormBuilder, private _localStateService: LocalStateService, private _dialogueref: MatDialogRef<AddEditComponent>) {
  this.empform = this._fb.group({
    firstname: ['', Validators.required],
    lastname: [''],
    email: ['', [Validators.required, Validators.email]],
    education: ['', Validators.required],
    dob: ['', Validators.required],
    gender: ['', Validators.required],
    company: [''],
    cnic: ['', [Validators.required], [this.cnicUniqueValidator()]], // 同步校验+异步唯一性校验
    address: [''],
    experience: ['', Validators.required],
    package: [''],
  });
}

3. 在模板中显示重复错误提示 #

修改CNIC字段的HTML代码，添加错误提示信息：

<mat-form-field appearance="outline">
  <mat-label>CNIC</mat-label>
  <input
    matInput
    color="primary"
    placeholder="xxxxxxxxxxxx"
    type="number"
    formControlName="cnic"
  />
  <!-- 必填错误提示 -->
  <mat-error *ngIf="empform.get('cnic')?.hasError('required')">
    CNIC为必填项
  </mat-error>
  <!-- 重复错误提示 -->
  <mat-error *ngIf="empform.get('cnic')?.hasError('cnicDuplicate')">
    该CNIC已存在，请输入唯一值
  </mat-error>
</mat-form-field>

4. 实现通过CNIC删除员工功能 #

第一步：在LocalStateService中添加删除方法 #

假设你的服务中存储了员工列表，添加以下删除逻辑：

// localstateservice.service.ts
export class LocalStateService {
  private employees: any[] = [];

  // ... 现有方法（如addEmployee、getEmployees等）

  deleteEmployeeByCnic(cnic: string | number): void {
    this.employees = this.employees.filter(emp => emp.cnic !== cnic);
    // 如果使用localStorage持久化数据，记得同步更新
    // localStorage.setItem('employees', JSON.stringify(this.employees));
  }
}

第二步：在员工列表组件中调用删除功能 #

在展示员工列表的组件中添加删除按钮并绑定事件：

<!-- employee-list.component.html -->
<div *ngFor="let emp of employees">
  <span>{{emp.firstname}} {{emp.lastname}} - CNIC: {{emp.cnic}}</span>
  <button mat-raised-button color="warn" (click)="deleteEmployee(emp.cnic)">删除</button>
</div>

// employee-list.component.ts
import { LocalStateService } from './localstateservice.service';

export class EmployeeListComponent {
  employees: any[] = [];

  constructor(private _localStateService: LocalStateService) {
    this.employees = this._localStateService.getEmployees();
  }

  deleteEmployee(cnic: string | number): void {
    this._localStateService.deleteEmployeeByCnic(cnic);
    this.employees = this._localStateService.getEmployees(); // 更新列表
  }
}

关键说明 #

• 异步验证器会在表单值变化时自动触发，确保提交前CNIC的唯一性，此时表单的valid状态会自动变为false，阻止提交。
• 若你的LocalStateService使用localStorage持久化数据，需在删除方法中同步更新存储内容。

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