Manage Forms Programmatically
Learn how to manipulate form values and validation rules programmatically.
We'll cover the following...
Reactive forms offer different methods to manipulate the form model from the component class. Combined with reactive programming techniques, it allows for designing elegant and modern solutions for a wide range of form requirements.
The valueChange property
Every instance of the AbstractControl class exposes a valueChange property. It’s an observable that emits every time the value of the control changes, either when the user enters a value in the template or programmatically in the component class.
Scenario: ZIP search feature
Let’s imagine we’re asked to implement a functionality allowing the users to enter a ZIP code in an input field and gather all the details about the requested geographical area. The backend team already provided an API accepting the ZIP code as a string and delivering back all the related data.
We can then subscribe to the valueChanges property to fetch all digits entered by the user. Since this property is an observable object, we can use the RxJs operators to apply the required logic in a ...