Угловые Реактивные формы: изменение против valueChanges - PullRequest
Новая
       8

Угловые Реактивные формы: изменение против valueChanges

0 голосов
/ 22 марта 2019

Я использую реактивные формы в Angular 7.

У меня есть много полей, которые зависят от других полей.

Что мне интересно, что я должен использовать (change) или this.form.get("control_name").valueChanges?

Например оба будут работать на входе. Я хочу знать разницу, плюсы и минусы между ними.

Что лучше с производительностью?

1 Ответ

4 голосов
/ 22 марта 2019

Давайте просто посмотрим, что вы ищете, чтобы прослушать изменение input тега type="text"

В случае valueChanges

Так как этоНаблюдаемый, он будет стрелять с новым значением.Это значение будет измененным значением поля 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>

Вот Рабочий образец StackBlitz для вашей ссылки.

ПРИМЕЧАНИЕ: От вашего варианта использования полностью зависит, какой из них будет более подходящим.

ОБНОВЛЕНИЕ:

Для вашего конкретного случая использования я бы предложилиспользование операторов RxJS для выполнения работы.Примерно так: 

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
  });
...