如何在Angular HTML模板中判断输入值是否已存在于数组中

核心错误原因 #

你的逻辑存在3个关键问题，导致重复校验失效：

• 双向绑定语法错误：(ngModel)="number"写法不规范，Angular双向绑定应为[(ngModel)]，且需要绑定到组件类中定义的属性，不能直接绑定到模板引用变量。
• 取值对象错误：#number="ngModel"声明的模板变量是Angular的NgModel表单控制实例，不是用户输入的实际值，直接将该实例传入includes方法不可能匹配到数组内的数字。
• 类型不匹配：input输入的内容默认是字符串类型，你定义的numbers数组内存的是数字类型，直接调用includes会因为类型不一致无法正确匹配。

修正后的代码 #

TS 文件修改 #

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  numbers: number[] = [1000,1100,1200,1300,1400];
  // 新增用于双向绑定的属性
  inputNumber: string | number = '';
}

HTML 模板修改 #

Numbers registered: {{ numbers }}
<form>
  <label for="number" class="absolute left-0 -top-5 text-green-950 text-sm transition-all">number<span class="text-red-500">*</span></label>
  <input id="number" #number="ngModel" [(ngModel)]="inputNumber" name="number" minlength="4" maxlength="4" required  placeholder="number" />

  <p class="text-sm px-3 text-red-500" *ngIf="!number.valid && number.touched">Enter exactly 4 digits!</p>
  <!-- 将输入值转为数字后再判断是否存在于数组中 -->
  <p class="text-sm px-3 text-red-500" *ngIf="numbers.includes(Number(inputNumber)) && number.touched">This number already exists!
  </p>
</form>

额外注意事项 #

确保你项目的AppModule中已经导入了FormsModule才能正常使用ngModel双向绑定：

// app.module.ts 中新增导入
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  // 其余配置保持不变
})

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