Angular Material 7.3.7中如何取消mat-select选择变更并恢复原状态？

针对你的需求，我有一个简洁直接的解决方案，完全不需要你之前尝试的繁琐valueChanges订阅逻辑，直接通过selectionChange事件和MatSelect实例就能实现：

核心思路 #

1. 提前保存当前选中的初始值，后续每次允许变更时更新这个值；
2. 在selectionChange事件触发时，判断是否需要取消本次变更；
3. 如果需要取消，直接将MatSelect实例的value恢复为之前保存的值，同时同步表单控件的值，确保UI和表单状态完全一致。

具体实现步骤 #

1. 组件类中添加变量和逻辑 #

首先在组件里定义一个变量保存之前的选中值，并在初始化时从表单控件获取初始值：

import { MatSelect, MatSelectChange } from '@angular/material/select';
import { FormGroup } from '@angular/forms';

// 假设你的表单组实例是这个变量（替换成你实际的表单组名称）
yourFormGroup: FormGroup;
// 用于保存上一次有效的选中项
previousVisualOption: any;

ngOnInit() {
  // 初始化时获取表单控件的初始选中值
  this.previousVisualOption = this.yourFormGroup.get('competenceVisualOption').value;
}

visualOptionSelectionChanged(event: MatSelectChange, select: MatSelect) {
  // 替换成你的特定条件判断，比如检查选中项是否符合业务要求
  const shouldRevert = event.value.someProperty === 'invalid';

  if (shouldRevert) {
    // 恢复MatSelect的UI选中状态
    select.value = this.previousVisualOption;
    // 同步表单控件的值，避免UI和表单数据不一致
    this.yourFormGroup.get('competenceVisualOption').setValue(this.previousVisualOption);
  } else {
    // 允许变更时，更新保存的上一次有效选中值
    this.previousVisualOption = event.value;
  }
}

2. 模板中传递MatSelect实例 #

修改你的模板，把#visualOptionsSelect实例传递给事件处理器：

<mat-form-field>
  <mat-select #visualOptionsSelect formControlName="competenceVisualOption" 
              (selectionChange)="visualOptionSelectionChanged($event, visualOptionsSelect)" required>
    <mat-option *ngFor="let visualOption of availableVisualOptions" [value]="visualOption">
      {{visualOption.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

处理异步验证的情况 #

如果你的条件判断需要异步操作（比如调用API验证选中项是否合法），可以临时禁用select防止用户重复操作：

async visualOptionSelectionChanged(event: MatSelectChange, select: MatSelect) {
  // 临时禁用控件，避免用户多次点击触发重复请求
  select.disabled = true;
  
  // 你的异步验证逻辑，比如调用后端API
  const shouldRevert = await this.validateVisualOption(event.value);

  if (shouldRevert) {
    select.value = this.previousVisualOption;
    this.yourFormGroup.get('competenceVisualOption').setValue(this.previousVisualOption);
  } else {
    this.previousVisualOption = event.value;
  }
  
  // 验证完成后恢复控件可用状态
  select.disabled = false;
}

为什么这个方法更优 #

• 不需要复杂的valueChanges订阅和对比逻辑，代码更简洁易维护；
• 直接操作MatSelect实例和表单控件，确保UI和数据状态完全同步；
• 恢复之前的选中值后，依赖该值的其他组件或业务逻辑会自动回到对应状态，不需要手动处理依赖项。

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