带有材质组件的角度形式更改事件

Question

我有一个包含输入和材料组件（如mat-select或mat-checkbox）的表单。

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

这对于本机输入完美无缺，但当用户更改材质组件值时它不会触发。

我宁愿避免<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) {...} ，因为正常行为是此观察者仅在发生更改（脏）时才应启动，但由于材料组件垫-xxx，该观察者在字段值更改后会被踢几次，因此为了避免对事件进行多次不必要的执行，您必须通过此条件过滤可观察值 if (this.editForm.dirty) {...}它只会在更改后执行。

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