如何让HTML表单列强制禁止重复输入？附Angular代码示例

针对你给出的Angular输入框代码，要实现同一列输入值不能重复的校验，这里提供两种可行方案：

方案一：自定义同步校验器（推荐） #

利用Angular的表单校验机制，创建自定义校验器来检查输入值是否重复：

1. 编写自定义校验函数 #

在组件类中添加以下校验逻辑：

// 自定义重复校验器，接收数据源数组作为参数
checkDuplicateTagNames(synColumn: any[]): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const currentValue = control.value;
    if (!currentValue) return null; // 空值跳过校验（已有required规则）
    
    // 统计当前值在数组中的出现次数
    const duplicateCount = synColumn.filter(item => item.tagName === currentValue).length;
    // 出现次数大于1则判定为重复
    return duplicateCount > 1 ? { duplicate: true } : null;
  };
}

2. 修改模板输入框并添加错误提示 #

将原输入框绑定校验器，同时添加错误提示元素：

<input 
  class="form-control" 
  aria-label="Default select example" 
  name="ques_temp{{ i }}" 
  required 
  [(ngModel)]="synColumn[i].tagName"  
  [ngModelOptions]="{standalone: true}" 
  (change)="changeSourceFieldColumn(synColumn[i].tagName,i)"
  [validator]="checkDuplicateTagNames(synColumn)"
/>
<!-- 重复校验错误提示 -->
<small class="text-danger" *ngIf="
  (synColumn[i].tagName && synColumn.filter(item => item.tagName === synColumn[i].tagName).length > 1)
">该值已存在，不能重复输入</small>

注意：确保组件模块中已引入FormsModule和ReactiveFormsModule，若需更精细化的表单状态管理，可将输入框整合进FormGroup中。

方案二：在change事件中手动校验 #

如果不想依赖表单校验器，可直接在输入变更事件中检查重复：

1. 更新change事件处理方法 #

changeSourceFieldColumn(tagName: string, index: number): void {
  // 排除当前项后，检查是否存在相同值
  const isDuplicate = this.synColumn.some((item, idx) => idx !== index && item.tagName === tagName);
  const inputElement = document.querySelector(`input[name="ques_temp${index}"]`) as HTMLInputElement;

  if (isDuplicate) {
    inputElement.classList.add('is-invalid');
    // 可选：重置输入值或弹出提示
    // this.synColumn[index].tagName = '';
    alert('该值已存在，不能重复输入');
  } else {
    inputElement.classList.remove('is-invalid');
  }
}

2. 模板中保留原输入框，添加错误提示 #

<input 
  class="form-control" 
  aria-label="Default select example" 
  name="ques_temp{{ i }}" 
  required 
  [(ngModel)]="synColumn[i].tagName"  
  [ngModelOptions]="{standalone: true}" 
  (change)="changeSourceFieldColumn(synColumn[i].tagName,i)"
/>
<div class="invalid-feedback" *ngIf="synColumn.some((item, idx) => idx !== i && item.tagName === synColumn[i].tagName)">
  该值已存在，不能重复输入
</div>

关键注意事项 #

• 确保synColumn数组的变更能被Angular检测到，避免校验延迟
• 动态生成的输入框需保证name属性唯一（你的代码中ques_temp{{ i }}已满足要求）
• 方案一更贴合Angular表单设计规范，便于统一管理表单状态和错误信息

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