如何为Angular Material combo box添加输入非可选内容的警告提示

实现思路 #

• 新增全量可选选项存储变量，用于对比用户输入是否合法
• 新增警告显示控制逻辑，根据输入匹配结果切换显隐
• 在表单字段上方插入警告提示节点，通过条件渲染控制显示
• 分别在用户输入、选项选中两个时机触发校验逻辑，更新警告状态

代码修改 #

1. 模板代码修改 #

在原有的mat-form-field上方新增警告提示块：

<!-- 警告提示，放在表单字段上方 -->
<div class="warning-text" *ngIf="showAircraftTypeWarning" style="color: #f44336; font-size: 12px; margin-bottom: 4px;">
  您输入的机型不在可选范围内，请从下拉列表中选择合法选项
</div>

<mat-form-field appearance="outline" class="width-1">
  <mat-label>Aircraft Type (ICAO)</mat-label>
  <input
    type="text"
    placeholder="Aircraft Type (ICAO)"
    aria-label="Aircraft Type (ICAO)"
    matInput
    formControlName="aircraftType"
    [matAutocomplete]="type"
    (input)="onAircraftTypeChange()"
  />
  <mat-autocomplete
    #type="matAutocomplete"
    (optionSelected)="onSelectAircraftType($event.option.value)"
    [displayWith]="displayAircraftTypeFn"
  >
    <mat-option
      *ngFor="let type of filteredAircraftTypes | async"
      [value]="type"
    >
      {{ type.label }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

2. 组件类（TS）代码修改 #

// 新增变量：控制警告显隐
showAircraftTypeWarning: boolean = false;
// 全量可选机型列表，替换为你实际的全量选项数据源
allAircraftTypes: any[] = [];

onAircraftTypeChange() {
  const inputControl = this.yourFormGroup.get('aircraftType');
  const inputValue = inputControl?.value;
  // 空输入不显示警告
  if (!inputValue) {
    this.showAircraftTypeWarning = false;
    // 保留原有过滤逻辑
    this.filteredAircraftTypes = of(this.allAircraftTypes);
    return;
  }
  
  // 适配输入是字符串/已选中的选项对象两种场景
  const inputStr = typeof inputValue === 'string' ? inputValue : inputValue.label;
  // 校验输入是否在全量可选列表中
  const isLegal = this.allAircraftTypes.some(item => 
    item.label.toLowerCase().includes(inputStr.toLowerCase())
  );
  this.showAircraftTypeWarning = !isLegal;
  
  // 保留原有过滤逻辑
  const filterValue = inputStr.toLowerCase();
  this.filteredAircraftTypes = of(
    this.allAircraftTypes.filter(type => type.label.toLowerCase().includes(filterValue))
  );
}

onSelectAircraftType(selectedVal: any) {
  // 选中合法选项后关闭警告
  this.showAircraftTypeWarning = false;
  // 保留原有选中后的业务逻辑
}

可选优化：使用表单校验器实现（符合Angular最佳实践） #

你可以将合法性校验逻辑封装为表单自定义校验器，和Angular表单体系深度联动，无需手动维护显隐变量：

// 表单初始化时添加自定义校验器
this.yourFormGroup = this.fb.group({
  aircraftType: ['', [this.aircraftTypeValidator()]]
});

// 自定义机型合法性校验器
aircraftTypeValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (!value) return null;
    const inputStr = typeof value === 'string' ? value : value.label;
    const isLegal = this.allAircraftTypes.some(item => 
      item.label.toLowerCase().includes(inputStr.toLowerCase())
    );
    return isLegal ? null : { illegalAircraftType: true };
  };
}

对应的模板警告部分修改为：

<div class="warning-text" *ngIf="yourFormGroup.get('aircraftType')?.hasError('illegalAircraftType') && yourFormGroup.get('aircraftType')?.touched" style="color: #f44336; font-size: 12px; margin-bottom: 4px;">
  您输入的机型不在可选范围内，请从下拉列表中选择合法选项
</div>

该方式可以和表单提交校验天然联动，提交时如果值不合法会自动触发提示，无需额外处理。

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