Angular: derived values from Forms with RxJS

In Angular, we often want to derive values from our forms to show computed values in our templates.

Let’s say we have a form like this:

Now, what if we want to show the full name?

In order to maintain a single source of truth (the form) and in order not to waste resources on useless computations, we may use RxJS!

Since our Reactive Form exposes a valueChanges Observable, we may take advantage of that:

The problem is that valueChanges doesn’t emit the first value of the form: so, we may use startWith to emit the first value ourselves:

Usually we stop here. Does this work? Kinda.

valueChanges is a Hot Observable