Angular5如何检测mat-autocomplete字段为空或已删除？

针对你的需求，其实可以通过Angular响应式表单的FormControl特性，结合原生输入事件来轻松实现检测。下面是具体的实现方案，适配你的代码场景：

核心实现思路 #

我们主要利用FormControl的valueChanges Observable来实时监听输入值的变化，同时也可以搭配原生输入事件/失焦事件来覆盖更多场景（比如用户手动删除最后一个字符的瞬间）。

1. 组件TS代码调整 #

首先确保你已经正确初始化并监听myControl这个FormControl：

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

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  myControl = new FormControl('');
  // 假设你有过滤后的选项列表（根据你的自动完成需求）
  filteredOptions: Observable<any[]>;

  ngOnInit() {
    // 实时监听输入值变化
    this.myControl.valueChanges.subscribe(inputValue => {
      // 判断输入是否为空（包括空字符串、null、全空格的情况）
      const isInputEmpty = !inputValue || inputValue.trim() === '';
      
      if (isInputEmpty) {
        console.log('输入字段已清空！');
        // 这里执行你需要的业务逻辑：比如重置过滤条件、清空关联数据等
        this.handleEmptyInput();
      } else {
        // 输入有内容时的逻辑（比如更新过滤选项）
        this.updateFilteredOptions(inputValue);
      }
    });
  }

  // 处理输入为空的逻辑
  private handleEmptyInput() {
    // 示例：重置过滤选项
    this.filteredOptions = of([]);
    // 其他业务操作...
  }

  // 更新自动完成的过滤选项（根据你的需求调整）
  private updateFilteredOptions(input: string) {
    // 示例逻辑：根据输入过滤选项
    // this.filteredOptions = this.options.pipe(
    //   map(options => options.filter(option => option.includes(input)))
    // );
  }
}

2. HTML代码调整 #

在你的现有HTML基础上，可以保留formControl绑定，也可以按需添加原生事件增强检测：

<ng-container *ngSwitchCase="'autocomplete'">
  <div [ngClass]="(filter.cssClass || 'col-md-4') + ' mt-2 pt-1'">
    <div class="filter-key-label"> {{filter.columnTitle}} </div>
    <div class="filter-form-control d-flex flex-wrap justify-content-left">
      <mat-form-field class="full-width">
        <input 
          type="text" 
          matInput 
          [formControl]="myControl" 
          [matAutocomplete]="auto"
          <!-- 可选：添加原生input事件，捕捉每一次键盘输入/删除操作 -->
          (input)="onInputTriggered(myControl.value)"
          <!-- 可选：添加blur事件，在输入框失焦时检测是否为空 -->
          (blur)="onInputBlur(myControl.value)"
        >
        <mat-autocomplete #auto="matAutocomplete">
          <!-- 你的自动完成选项 -->
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>
  </div>
</ng-container>

如果添加了上面的原生事件，在TS里补充对应的方法即可：

// 响应原生input事件
onInputTriggered(value: string) {
  const isEmpty = !value || value.trim() === '';
  if (isEmpty) {
    console.log('用户手动清空了输入');
    // 执行对应逻辑...
  }
}

// 响应失焦事件
onInputBlur(value: string) {
  const isEmpty = !value || value.trim() === '';
  if (isEmpty) {
    console.log('输入框失焦且为空');
    // 执行对应逻辑...
  }
}

方案说明 #

• valueChanges订阅：这是最核心的方式，能实时捕获所有输入值变化（包括选择自动完成选项、手动输入、删除内容等场景）。
• input事件：适合需要精确捕捉每一次键盘操作的场景（比如用户逐字符删除时的实时反馈）。
• blur事件：适合需要在用户离开输入框时进行检测的场景（比如校验、自动提交等）。

你可以根据自己的业务需求选择单独使用或组合使用这些方式。

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