Creating Reactive Forms for Client Contacts Manager Application

Let's use RxJS to improve the search of our application and add onChanges lifecycle hook to populate a Reactive form with the data passed in from the parent Component.

We'll cover the following

Major changes

In this version of an application, we have made the following changes:

  • Updated both the Client and Company services to show that Observables are being returned from the HttpClient calls.

  • Updated both the Client Edit form and the Company Edit form to Reactive forms.

  • Used RxJs in the Search Form Component, so it now starts searching as you type.

  • Added OnChanges lifecycle hook to both the Client and Company edit forms in order to populate a Reactive form with the data passed in from the parent Component.

The client folder

We will make the following changes in the client folder.

Amend client.service.ts

Amending this file to now return the Observable from each method allows the Observable to be Subscribed to when used. This starts to show how Observables are used in different ways, trying to introduce Subscribing.

Update client-detail

We have expanded the form so that it is populated with data when the component loads. It checks for a change to the Client details using the onChange event. If there are new Client’s details to display, then the form is populated with these new details.

📝 Note: Similarly, we have made some minor changes in client-edit-page, client-details-page, client-page, and client-form, search-form components, and shared.module. These minor changes are highlighted within their respective components.

Get hands-on with 1400+ tech skills courses.