Angularのリアクティブフォーム：変更をリッスンする

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は観測可能な値を返すため、放出される値で何ができるかという点では、あなたの空はほとんど限界です。