Angular 6与Material 6升级后(change)事件在部分元素失效问题咨询

Root Cause #

After upgrading to Angular v6 and Angular Material v6, the behavior of the (change) event shifted for key form components like mat-select and mat-input[type="text"].

Previously, Angular Material components emitted the (change) event in lockstep with model updates when using ngModel. But in v6, (change) now maps directly to the native DOM change event, which fires at a different time than when Angular updates the model. This timing mismatch is why the event fails to trigger as expected for these components, while mat-checkbox still works (its native event aligns better with model updates).

Fixes to Resolve the Issue #

You’ve already found one solid fix, but here are all reliable options:

1. Use (ngModelChange) Instead of (change) #

This is the most straightforward solution, as you discovered. (ngModelChange) is Angular’s dedicated event that triggers exactly when the model value updates, bypassing any native DOM event inconsistencies. It works consistently across all form components when using two-way binding with ngModel.

Example:

<!-- Before (broken for select/text inputs) -->
<mat-select [(ngModel)]="selectedValue" (change)="handleChange()">...</mat-select>

<!-- After (works for all components) -->
<mat-select [(ngModel)]="selectedValue" (ngModelChange)="handleChange($event)">...</mat-select>

Pro tip: Use $event with ngModelChange to directly access the new value in your handler function.

2. Use Component-Specific Change Events #

Angular Material components have their own purpose-built change events that sync with their internal state:

• For mat-select, use (selectionChange)
• For mat-input[type="text"], use (input) (triggers on every keystroke, just like ngModelChange for text inputs)

These events are designed to work seamlessly with the component’s behavior, so they’ll reliably fire when values change.

Example for mat-select:

<mat-select [(ngModel)]="selectedValue" (selectionChange)="handleSelection($event)">...</mat-select>

Key Notes #

• The native (change) event still works for plain HTML elements (like <select> or <input> without Material wrapping), but it’s not reliable for Angular Material components post-v6.
• If you’re not using ngModel, native (change) might still work for some cases, but component-specific events are always safer for Material components.

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