Material 成分的 Angular 形状变化事件

Question

我有一个包含输入和 Material 组件的表单(例如 mat-select 或 mat-checkbox )。

每次用户进行修改时，我都想将它们保存到数据库中。所以我做了类似 <form (change)="save()"> 的事情.

这对于 native 输入来说可以完美地工作，但是当用户更改 Material 组件值时它不会触发。

我宁愿避免使用 <mat-select (selectionChange)="save()"> 之类的解决方案在每个组件上，因为当我必须更新表单时我很容易忘记添加它。

编辑

这是一个模板驱动的表单。我的模板如下:

<form (change)="save()">
    <!-- Will trigger save -->
    <mat-form-field class="col">
        <input matInput placeholder="Name" name="name" [(ngModel)]="item.name">
    </mat-form-field>

    <!-- Will NOT trigger save -->
    <mat-form-field class="col">
        <mat-select placeholder="Category" name="category [(ngModel)]="item.category.id">
            <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name}}</mat-option>
        </mat-select>
    </mat-form-field>

    <!-- ... -->
</form>

组件代码没有什么特别的，只有模型变量( item: Item; )。

Answer 1

此解决方案适用于 Angular 11.2.1 和 Material 11.2.1

您需要使用 valueChanges observable 捕获更改

this.editForm.valueChanges
 .subscribe(value=> {
       if (this.editForm.dirty) {
              //do something
              }
           });

注意事项:

1. 通常您不需要放置过滤器 if(this.editForm.dirty) {...} ，因为正常行为是此观察者仅在发生更改(脏)时才启动，但由于 Material 组件 mat-xxx，该观察者在字段值更改后会被踢几次，因此为了避免对事件进行多次不必要的执行，您必须通过此条件 if (this.editForm.dirty) { 来过滤可观察对象。 ..} 只有在更改后才会执行。

这再次适用于响应式(Reactive)表单，我刚刚注意到您的问题使用模板驱动，但值得注意，以防万一有人正在寻找响应式(Reactive)表单的解决方案。