Angular 5 非响应式表单验证：校验输入词汇是否已存在

没问题，咱们用模板驱动表单来实现这个需求就可以，完全不用响应式表单。我给你调整代码，一步步实现：

1. 调整组件TS代码 #

首先移除响应式表单相关的依赖，改用模板驱动的方式，同时保留对话框的相关注入。我们需要定义已有词汇列表，以及一个标志位来控制提示信息的显示：

import { Component, Inject } from "@angular/core";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";

@Component({
  selector: "app-tag-dialog",
  templateUrl: "./tag-dialog.component.html"
})
export class TagDialogComponent {
  // 模拟已有词汇列表，你可以换成实际的数据源（比如从服务获取）
  existingWords: string[] = ['angular', 'typescript', 'javascript'];
  // 控制重复提示的显示状态
  wordExists = false;
  // 绑定输入框的ngModel值
  inputWord = '';

  constructor(
    public dialogRef: MatDialogRef<TagDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  // 校验词汇是否存在的方法
  checkWordExists(): void {
    // 先去除首尾空格，避免空输入或空格干扰
    const trimmedWord = this.inputWord.trim().toLowerCase();
    this.wordExists = trimmedWord && this.existingWords.some(word => word.toLowerCase() === trimmedWord);
  }

  // 对话框确认按钮逻辑（可选，根据你的需求调整）
  onConfirm(): void {
    if (!this.wordExists && this.inputWord.trim()) {
      this.dialogRef.close(this.inputWord.trim());
    }
  }

  // 取消按钮逻辑
  onCancel(): void {
    this.dialogRef.close();
  }
}

2. 编写模板文件（tag-dialog.component.html） #

在模板里使用ngModel绑定输入框，监听输入事件触发校验，然后根据wordExists状态显示提示信息：

<h2>Add New Word</h2>
<form #tagForm="ngForm">
  <mat-form-field appearance="fill">
    <mat-label>Enter Word</mat-label>
    <input 
      matInput 
      name="word" 
      [(ngModel)]="inputWord"
      (input)="checkWordExists()"
      required
    >
    <!-- 重复提示信息 -->
    <mat-error *ngIf="wordExists">
      This word already exists!
    </mat-error>
    <!-- 必填提示（可选，根据需求添加） -->
    <mat-error *ngIf="tagForm.controls['word']?.invalid && tagForm.controls['word']?.touched">
      Word is required
    </mat-error>
  </mat-form-field>

  <div class="dialog-actions">
    <button mat-button (click)="onCancel()">Cancel</button>
    <button mat-raised-button color="primary" (click)="onConfirm()" [disabled]="wordExists || !inputWord.trim()">
      Confirm
    </button>
  </div>
</form>

关键说明 #

• 我们用(input)事件实时监听用户输入，每次输入都调用checkWordExists()方法校验
• trim()和toLowerCase()是为了避免大小写和空格导致的误判，你可以根据实际需求调整
• 确认按钮添加了[disabled]属性，避免用户提交重复或空的词汇
• 使用mat-error来显示提示信息，符合Material组件的样式规范

这样就实现了你要的功能：用户输入已存在的词汇时，输入框下方会显示指定提示，全程用的是模板驱动表单，没有用到响应式表单的API。

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