私はAngular 7.で反応フォームを使用しています。
他のフィールドに依存しているフィールドがたくさんあります。
_(change)
_またはthis.form.get("control_name").valueChanges
を何に使用すればよいかについて知りたいのですが?
例のために。どちらも入力で機能します。それらの違い、長所と短所を知りたいです。
どちらがパフォーマンスに優れていますか?
探しているのは、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
});
これはケース・トゥ・ケースですが、チェックボックスやラジオボタン(true/falseタイプのコントロール)のようなものが(change)ハンドラーでうまく機能し、入力とテキストフィールドは一般にvalueChangesに適しています。
パフォーマンスについてはよくわかりませんが、これはこの決定に対処する場合の理想的なユースケースだと思います。
(すべての)valueChangesの適切な使用例は、多くのngIfロジックを持つ複雑なフォームです。これらのフォームが正しく機能するために、値の変更の「連鎖反応」が必要な場合があります。その場合、(変更)ハンドラは役に立たないでしょう。
入力(テキスト)フィールドの場合、ユースケースに応じてchangeValues
またはvalue
を使用することをお勧めします。
changeValues
を使用します。change
を使用します。これは単なる経験則ですが、悪魔は詳細にあります。
これは、私が自分の研究/テストを行っているときに書いた作業例のコードです。比較のために両方のアプローチを実装しています。