Angular 7 组件：如何通过用户交互检测变化？

Question

我有一个带有多个复选框、下拉菜单和一个保存按钮的组件。这是一个简化的示例组件模板：

<aside class="container">
  <div class="row">
    <input
      type="checkbox"
      id="all-users"
      [(ngModel)]="showAllUsers"
      (ngModelChange)="onChange($event)"
    />
    <label for="all-users">Show all users</label>
  </div>
  <div class="row">
    <ng-select
      [(ngModel)]="selectedUser"
      [clearable]="false"
      appendTo="body"
      (change)="onChange($event)"
    >
      <ng-option *ngFor="let user of activeUsers" [value]="user">{{ user }}</ng-option>
    </ng-select>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary" [disabled]="!dirty" (click)="onSave()">
      Save Changes
    </button>
  </div>
</aside>

我想Save Changes仅在用户进行更改时启用该按钮，无论是通过取消选中复选框还是更改下拉框中的选择。

现在，我在组件中的每个控件（onChange上例中的函数）上注册了一个事件处理程序，并使用一个dirty标志来禁用或启用Save Changes按钮。

这是上述模板的 component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent implements OnInit {
  dirty: boolean;
  showAllUsers: boolean;
  selectedUser: string;
  activeUsers: string[];

  ngOnInit() {
    this.dirty = false;
    this.showAllUsers = true;
    this.activeUsers = ['Thanos', 'Thor', 'Starlord'];
    this.selectedUser = 'Thor';
  }
  onChange(event) {
    console.log('Event is ' + event);
    this.dirty = true;
  }
  onSave() {
    console.log('Gonna save changes...');
    this.dirty = false;
  }
}

对我来说，将事件处理程序注册到每个控件似乎并不直观。

这是确定用户所做更改的正确方法还是 Angular 提供了不同的方法来实现此目的？

Answer 1

我强烈建议使用FormGroup和FormControl来实现此行为。

两者都公开了脏属性，一个只读布尔值。

当用户从 UI更改 的值时，dirty将设置该属性。在 的情况下，只要该组中至少有 1 个是脏的，脏属性就设置为脏。trueFormControlFormGrouptrueFormControl

附带说明一下，该属性pristine是相反的属性。因此，如果可以简化条件，您可以使用其中之一。

[disabled]="myFormGroup.pristine"可能比 更容易阅读[disabled]="!myFormGroup.dirty"。