Angular Reactive 形式 : change vs valueChanges

Question

我在 Angular 7 中使用 reactive forms。
我有很多领域依赖于其他领域。
我对什么应该使用 (change) 或 this.form.get("control_name").valueChanges 感到好奇？
例如。如果两者都适用于输入，那么我想知道它们之间的区别，优缺点。
哪个效果更好？

Answer 1

让我们考虑一下您正在寻找的是监听 input 的 type="text" 标签上的更改

在 valueChanges 的情况下

由于它是一个 Observable，它将以一个新值触发。该值将是 input 字段的更改值。要收听它，您必须将 subscribe 转换为 valueChanges Observable。像这样的东西:

this.form1.controls['name'].valueChanges.subscribe(change => {
  console.log(change); // Value inside the input field as soon as it changes
});

在 (change) 事件的情况下

在 change 事件的情况下，对于 input 标记， change 事件将 仅在您将 blur 远离 input 字段时触发。此外，在这种情况下，您将获得 $event 对象。从那个 $event 对象中，您必须提取字段值。

所以在代码中，这看起来像这样:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({...})
export class AppComponent  {
  name = 'Angular';
  form1: FormGroup;
  form2: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form1 = this.fb.group({
      name: [],
      email: []
    });

    this.form2 = this.fb.group({
      name: [],
      email: []
    });

    this.form1.controls['name'].valueChanges.subscribe(change => {
      console.log(change);
    });
  }

  onForm2NameChange({ target }) {
    console.log(target.value);
  }

}

在模板中:

<form [formGroup]="form1">
  <input type="text" formControlName="name">
  <input type="text" formControlName="email">
</form>

<hr>

<form [formGroup]="form2">
  <input type="text" formControlName="name" (change)="onForm2NameChange($event)">
  <input type="text" formControlName="email">
</form>

Here's a Working Sample StackBlitz for your ref.

注意: 这完全取决于您的用例，哪个更合适。

更新:

对于您的特定用例，我建议使用 RxJS Operators 来完成工作。像这样的东西:

zipCodeFormControl
  .valueChanges
  .pipe(
    debounceTime(500),
    distinctUntilChanged(),
    switchMap(
      zipcode => getAddressFromZipcode(zipcode)
    ),
    map(res => res.actualResult)
  )
  .subscribe(addressComponents => {
    // Here you can extract the specific Address Components
    // that you want to auto fill in your form and call the patchValue method on your form or the controls individually
  });