如何条件性阻止mat-select值在用户确认前发生变更

数据老陈

2026-10-6

Angular Material mat-select 选择前确认阻止值变更方案

实现逻辑

核心思路是取消双向绑定的自动值更新，手动控制mat-select的显示值与绑定变量的同步时机：

取消mat-select的[(ngModel)]双向绑定，改为单向绑定[value]，仅在用户确认后才更新绑定变量
监听selectionChange事件，触发第一时间先把mat-select的显示值重置为原有值，避免用户视觉上看到值提前变更
确认后再同步更新绑定变量和mat-select的显示值，取消则保持原有值不变

代码示例

模板代码（app.component.html）

<mat-select 
  [value]="selectedValue" 
  (selectionChange)="onSelectionChange($event)"
  placeholder="选择选项">
  <mat-option *ngFor="let option of options" [value]="option">
    {{option}}
  </mat-option>
</mat-select>

组件代码（app.component.ts）

import { Component } from '@angular/core';
import { MatSelectChange } from '@angular/material/select';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = ['选项1', '选项2', '选项3'];
  selectedValue = '选项1';

  onSelectionChange(event: MatSelectChange) {
    // 临时重置select显示值为旧值，避免视觉上提前跳转
    event.source.value = this.selectedValue;

    // 弹出确认框，使用自定义模态框时把后续逻辑放到确认回调即可
    const isConfirm = confirm('确认要切换选中值吗？');
    if (isConfirm) {
      this.selectedValue = event.value;
      event.source.value = this.selectedValue;
    }
  }
}