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

【问题标题】：Angular 7 components: how to detect a change by user interaction?Angular 7 组件：如何通过用户交互检测变化？
【发布时间】：2019-08-06 23:53:47
【问题描述】：

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

<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 提供了不同的方法来实现这一点？

【问题讨论】：

这是您正在寻找的 angular.io/api/forms/FormControl，带有 dirty 属性
@Morphyish 谢谢。如您所见，我不使用表单。我只是将控件放置在组件中。你建议我使用反应形式吗？（FormControl 以及angular.io/api/forms/FormGroup 因为我有几个控件）？
在我看来，这将是最简单的方法，脏属性正是您要寻找的，它比从头开始更容易。
好的，试一试，告诉你结果！
@Morphyish 我接受了你的提示，并按照angular.io/guide/reactive-forms 的角度反应形式指南进行操作。看起来这比我自己管理 dirty 标志更好。您能否详细说明您的评论并将其发布为答案？我也会接受。

标签： html angular angular7 angular2-components

【解决方案1】：

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

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

当用户从 UI 更改 FormControl 的值时，dirty 属性设置为 true。对于FormGroup，只要该组中至少有一个FormControl 是脏的，脏属性就会设置为true。

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

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

【讨论】：