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按钮。

以下是上述模板的组件.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 更改FormControl的值时，dirty 属性设置为true。对于 FormGroup ，只要该组中至少 1 个FormControl是脏的，脏属性就设置为true。

作为旁注，属性pristine是相反的属性。因此，如果它简化了条件，您可以使用其中一个。

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