Table of Contents
Reactive form instances like FormGroup and FormControl have a <^>valueChanges<^> method that returns an observable that emits the latest values. You can therefore subscribe to valueChanges to update instance variables or perform operations.
Take a look at our intro to Reactive Forms if this is all new to you.
Here we'll create a very simple example that updates a template string every time a value changes in the form.
First, let's initialize our reactive form with <^>FormBuilder<^>:
myForm: FormGroup;
formattedMessage: string;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
name: '',
email: '',
message: ''
});
this.onChanges();
}
Notice how we call an <^>onChanges<^> method in the <^>ngOnInit<^> lifecycle hook after having initialized our form. Here's the content of our onChanges method:
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}.`;
});
}
You can also listen for changes on specific form controls instead of the whole form group:
onChanges(): void {
this.myForm.get('name').valueChanges.subscribe(val => {
this.formattedMessage = `My name is ${val}.`;
});
}
🌌 Since <^>valueChanges<^> returns an observable, thy sky is pretty much the limit in terms of what you can do with the values that are emitted.
