FormGroupやFormControlなどのリアクティブフォームインスタンスには、最新の値を発行するオブザーバブルを返すvalueChangesメソッドがあります。 したがって、 valueChanges をサブスクライブして、インスタンス変数を更新したり、操作を実行したりできます。
これがまったく新しい場合は、リアクティブフォームの概要をご覧ください。
ここでは、フォームの値が変更されるたびにテンプレート文字列を更新する非常に簡単な例を作成します。
まず、リアクティブフォームをFormBuilderで初期化します。
myForm: FormGroup;
formattedMessage: string;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
name: '',
email: '',
message: ''
});
this.onChanges();
}
フォームを初期化した後、ngOnInitライフサイクルフックでonChangesメソッドを呼び出す方法に注目してください。 onChangesメソッドの内容は次のとおりです。
onChanges(): void {
this.myForm.valueChanges.subscribe(val => {
this.formattedMessage =
`Hello,
My name is ${val.name} and my email is ${val.email}.
I would like to tell you that ${val.message}.`;
});
}
フォームグループ全体ではなく、特定のフォームコントロールの変更をリッスンすることもできます。
onChanges(): void {
this.myForm.get('name').valueChanges.subscribe(val => {
this.formattedMessage = `My name is ${val}.`;
});
}
🌌valueChangesは観測可能な値を返すため、放出される値で何ができるかという点では、あなたの空はほとんど限界です。