Angular自动完成组件异步验证失效的问题解决需求

核心需求 #

• 用户必须从自动完成选项中选择值，选中后无错误提示
• 手动修改选中值的任意字符时，立即触发错误提示并将FormControl标记为invalid
• 当前待解决问题：异步验证未生效；输入时过滤选项的异常（关联已标记resolved的GitHub Issue #13200，但仍复现）

实现代码 #

component.ts

import { Component } from '@angular/core';
import { FormControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { delay, map } from 'rxjs/operators';

@Component({
  selector: 'app-autocomplete-validation',
  templateUrl: './autocomplete-validation.component.html'
})
export class AutocompleteValidationComponent {
  options: string[] = ['John', 'Jane', 'Jack', 'Jill'];
  autocompleteControl = new FormControl('', {
    asyncValidators: [this.autocompleteValidator()],
    updateOn: 'change'
  });

  autocompleteValidator(): AsyncValidatorFn {
    return (control: FormControl): Observable<ValidationErrors | null> => {
      if (!control.value) return of(null);
      
      return of(this.options.includes(control.value)).pipe(
        delay(100),
        map(isValid => isValid ? null : { invalidAutocomplete: true })
      );
    };
  }

  filterOptions(value: string): string[] {
    const filterValue = value.toLowerCase();
    // 针对Issue #13200的临时修复：若当前值是完整选项，返回全量列表避免误过滤
    if (this.options.includes(value)) return [...this.options];
    return this.options.filter(opt => opt.toLowerCase().includes(filterValue));
  }

  onOptionSelected(event: any): void {
    this.autocompleteControl.setValue(event.option.value);
    this.autocompleteControl.updateValueAndValidity({ emitEvent: false });
  }
}

component.html

<mat-form-field appearance="fill">
  <mat-label>选择名称</mat-label>
  <input 
    type="text" 
    matInput 
    [formControl]="autocompleteControl"
    [matAutocomplete]="auto"
  >
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
    <mat-option 
      *ngFor="let option of filterOptions(autocompleteControl.value)" 
      [value]="option"
    >
      {{ option }}
    </mat-option>
  </mat-autocomplete>
  <mat-error *ngIf="autocompleteControl.hasError('invalidAutocomplete')">
    请选择有效的选项，禁止修改选中值
  </mat-error>
</mat-form-field>

关键修复点 #

1. 异步验证生效：

   • 给FormControl配置updateOn: 'change'，确保输入变化立即触发验证
   • 自定义异步验证器严格校验输入值是否存在于选项列表，模拟后端异步校验逻辑

2. 选中值状态同步：

   • 通过optionSelected事件手动同步控件值，并调用updateValueAndValidity强制更新验证状态，避免选中后仍报错

3. 过滤异常修复（针对Issue #13200）：

   • 在过滤方法中增加判断：若当前输入值是完整的选项，直接返回全量选项列表，避免选中后输入框值被误过滤

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