web-dev-qa-db-ja.com

Angular反応的なフォーム：変更と値の変更

私はAngular 7.で反応フォームを使用しています。

他のフィールドに依存しているフィールドがたくさんあります。

_(change)_またはthis.form.get("control_name").valueChangesを何に使用すればよいかについて知りたいのですが？

例のために。どちらも入力で機能します。それらの違い、長所と短所を知りたいです。

どちらがパフォーマンスに優れていますか？

angularangular-reactive-formsangular-formsangular-observable
2
Ankur Akvaliya

探しているのは、type="text"のinputタグの変更をリッスンすることだと考えてみましょう。

valueChangesの場合

Observableなので、新しい値で起動します。この値は、inputフィールドの変更された値になります。そして、それを聞くには、subscribeからvalueChangesオブザーバブルまでを取得する必要があります。このようなもの：

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>

これが、参考用の Working Sample 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
  });
8
SiddAjmera

これはケース・トゥ・ケースですが、チェックボックスやラジオボタン（true/falseタイプのコントロール）のようなものが（change）ハンドラーでうまく機能し、入力とテキストフィールドは一般にvalueChangesに適しています。

パフォーマンスについてはよくわかりませんが、これはこの決定に対処する場合の理想的なユースケースだと思います。

（すべての）valueChangesの適切な使用例は、多くのngIfロジックを持つ複雑なフォームです。これらのフォームが正しく機能するために、値の変更の「連鎖反応」が必要な場合があります。その場合、（変更）ハンドラは役に立たないでしょう。

2
Brian Hanna

入力（テキスト）フィールドの場合、ユースケースに応じてchangeValuesまたはvalueを使用することをお勧めします。

  • 「Googleのオートコンプリート機能」に似たものを実装する場合、つまり、入力中に（検索）候補を提供する場合→changeValuesを使用します。
  • 他のすべてのケースでは、changeを使用します。

これは単なる経験則ですが、悪魔は詳細にあります。

これは、私が自分の研究/テストを行っているときに書いた作業例のコードです。比較のために両方のアプローチを実装しています。

0
Víctor Gil