Angular表格中bookOrder输入控件添加唯一值验证规则的方法

我们可以通过在组件中增加重复值校验方法，配合Angular模板的条件渲染即可快速实现需求，无需引入额外依赖：

步骤1：在组件类中添加校验方法 #

在对应的component.ts文件中增加判断序号是否重复的工具方法：

// 校验排序序号是否重复
isOrderDuplicate(currentOrder: number): boolean {
  // 未输入时不触发校验
  if (!currentOrder) {
    return false;
  }
  // 统计当前序号在列表中出现的次数
  const repeatCount = this.books.filter(item => item.bookOrder === currentOrder).length;
  return repeatCount > 1;
}

步骤2：修改表格模板代码 #

调整原输入框的配置，增加错误状态绑定和错误提示节点：

<tbody>
    <tr *ngFor="let book of books" [ngClass]="{'isActiveBooks' : !book.isActive}">
        <td>
            <div class="text-description" [appLongText]="book.bookName" ngbTooltip="{{book.bookName}}" [maxTextLength]="45"></div>
        </td>
        <td>
            <input type="number" min="1" class="book-order-input"
                placeholder="Enter" (change)="orderChanged=true"
                [(ngModel)]="book.bookOrder"
                [ngClass]="{'input-error': isOrderDuplicate(book.bookOrder)}"
                >
            <!-- 重复时展示错误提示 -->
            <div *ngIf="isOrderDuplicate(book.bookOrder)" class="text-danger mt-1 small">
                排序序号不可重复，请修改
            </div>
        </td>       
    </tr>
</tbody>

步骤3：可选补充错误样式 #

你可以根据项目UI规范调整错误状态的样式，示例如下：

.input-error {
  border: 1px solid #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255,77,79,0.2);
}
.text-danger {
  color: #ff4d4f;
}
.mt-1 {
  margin-top: 4px;
}
.small {
  font-size: 12px;
}

如果需要在提交表单时做全局校验，只需要在提交逻辑开头增加判断即可：

submitForm() {
  // 全局校验是否有重复序号
  const hasDuplicate = this.books.some(book => this.isOrderDuplicate(book.bookOrder));
  if (hasDuplicate) {
    // 有重复则阻止提交
    return;
  }
  // 后续正常提交逻辑
}

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