Async data in a form with Angular

In my previous article, I explained to how to use Angular reactive forms and in particular how to handle errors. I recently noticed that if you want to reuse this example for an update form with data coming from a server (which is pretty common), it’s not that easy.

Add default async data to a form

Let’s add an email and a password input to the LoginComponent and use them as default values for the form:

The following AppComponent template will set this value:

To initialize them we use a setTimeout to simulate a call to a server:

This doesn’t work… The fields never get populated with the data from the server. This is embarrassing…

Solution 1: *ngIf

My first idea was to add a *ngIf on the component tag, so that the form is created only once the email and password data is successfully fetched.

This solution is nice and simple, but it only works once. If for some reason the data changes (for instance if it is fetched from a websocket), then only the first (initial) change would be updated.

You can test it by adding a second setTimeout in the AppComponent:

Solution 2: OnChanges

The issue is that we initialize our form with default values in ngOnInit() and never replicate the change. So to fix this, our LoginComponent simply needs to implement OnChanges so that we can set the new values to the form in ngOnChanges():

Which solution to use?

If your form is fetching data with a single call, then it is more efficient to just show the form when the data is ready. Solution 2 is may not be well suited for the case of a form. It could be confusing for the user if the data changed while he was updating it.

You will encounter this issue every time your parent component fetches data asynchronously to pass it to its child if the latter needs to process it before it is displayed — even if the processing consists of something as simple as appending “++” to a string (see example below).

Thanks for reading this article. You can find the full examples on Github: solution 1 and solution 2.