Angular 5中MatAutocomplete的onSelectionChange异常及取消选中检测问题

嘿，我之前在Angular 5里用MatAutocomplete的时候也碰到过这个坑——(onSelectionChange)确实只在用户选中选项时触发，一旦手动清空输入框或者取消选中，完全没反应，根本没法及时更新模型。给你几个亲测有效的解决方案：

这是最直接的方法，因为不管用户是选中选项、手动输入还是清空内容，FormControl的值都会变化，我们可以通过订阅这个变化来判断是否需要重置模型。

组件代码： #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'autocomplete-demo',
  templateUrl: './autocomplete-demo.component.html'
})
export class AutocompleteDemoComponent implements OnInit, OnDestroy {
  myControl = new FormControl();
  options: string[] = ['Angular', 'React', 'Vue'];
  selectedItem: string | null = null;
  private valueSub: Subscription | undefined;

  ngOnInit() {
    // 订阅FormControl的值变化
    this.valueSub = this.myControl.valueChanges.subscribe(currentValue => {
      // 检查当前值是否是有效选项
      const isValidOption = this.options.includes(currentValue);
      
      if (!currentValue || !isValidOption) {
        // 清空或者输入了无效内容，重置选中状态和模型
        this.selectedItem = null;
        console.log('已取消选中/输入清空，模型已更新');
        // 这里写你的模型更新逻辑，比如调用接口或者修改组件变量
      } else {
        // 选中了有效选项，更新选中状态
        this.selectedItem = currentValue;
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏（Angular 5必须手动处理）
    if (this.valueSub) {
      this.valueSub.unsubscribe();
    }
  }
}

模板代码： #

<mat-form-field class="example-full-width">
  <input 
    type="text" 
    placeholder="选择框架" 
    matInput 
    [formControl]="myControl" 
    [matAutocomplete]="auto"
  >
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

如果你需要区分“用户主动选中选项”和“输入框失去焦点时的校验”，可以用这个组合方案：用onSelectionChange处理选中逻辑，用blur事件做最后兜底，确保输入框失去焦点时模型是正确的。

组件代码： #

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'autocomplete-demo',
  templateUrl: './autocomplete-demo.component.html'
})
export class AutocompleteDemoComponent {
  myControl = new FormControl();
  options: string[] = ['Angular', 'React', 'Vue'];
  selectedItem: string | null = null;

  onOptionSelected(event: any) {
    // 只处理用户主动选中的情况（排除组件内部触发的选择）
    if (event.isUserInput) {
      this.selectedItem = event.source.value;
      console.log('选中了选项：', this.selectedItem);
      // 更新模型逻辑
    }
  }

  onInputBlur() {
    const currentValue = this.myControl.value;
    // 失去焦点时检查值是否有效
    if (!currentValue || !this.options.includes(currentValue)) {
      this.selectedItem = null;
      console.log('输入无效/已清空，模型已重置');
      // 更新模型逻辑
    }
  }
}

模板代码： #

<mat-form-field class="example-full-width">
  <input 
    type="text" 
    placeholder="选择框架" 
    matInput 
    [formControl]="myControl" 
    [matAutocomplete]="auto"
    (blur)="onInputBlur()"
  >
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option 
      *ngFor="let option of options" 
      [value]="option"
      (onSelectionChange)="onOptionSelected($event)"
    >
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

• Angular 5的RxJS版本还没有takeUntil这类简化订阅管理的操作符，所以一定要在ngOnDestroy里手动取消valueChanges的订阅，避免内存泄漏。
• 如果你的项目用的是模板驱动表单，也可以用(ngModelChange)替代FormControl的valueChanges，逻辑是完全一致的。

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