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 and FormControl 来实现此行为。

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

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

作为旁注，属性 pristine 与属性相反。因此，如果可以简化条件，您可以使用其中之一。

[disabled]="myFormGroup.pristine" 可能比 [disabled]="!myFormGroup.dirty".

更容易阅读

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

Angular 7 components: how to detect a change by user interaction?

html

angular2-components

angular

angular7