Master Reactive Forms in Angular with RxJS: A Practical Example

Why Use Reactive Programming?

Reactive programming lets you view every change as a data stream, making program logic clearer. For example, consider a UI that needs to input an age together with a unit (years, months, days) before a birthday field.

The requirements are:

Age can be expressed in years, months, or days.

If the age is ≤ 3 months, use days; if ≤ 2 years, use months; otherwise use years.

When the age changes, the birthday field should update accordingly, based on the selected unit.

Traditional code would require separate event handlers for the age and unit controls. With RxJS we treat each control as an Observable stream.

Rx defines three kinds of streams:

Never‑ending streams.

Finite streams that complete after a number of emissions.

Special streams that never emit (used for edge cases).

In our example we have two source streams: one for the age value and one for the unit. Each change produces a new value in its stream. We need a combined stream that emits whenever either source changes, always containing the latest value from both.

The RxJS operator that does exactly this is

combineLatest

. Using

age$

for the age stream and

ageUnit$

for the unit stream, the combined logic (simplified to use days as the unit) looks like:

After merging, we still need to convert the combined value (age in days) to an actual birthdate. The

map

operator together with

momentjs

can subtract the number of days from the current date to produce an estimated birthday.

RxJS in Reactive Forms

Angular offers two form models: template‑driven and reactive. The reactive approach uses a

FormGroup

with three simple steps:

Add

formControlName="..."

to each control in the template.

Bind the form element with

[formGroup]="myForm"

, where

myForm

is a

FormGroup

instance defined in the component.

In the component constructor inject

FormBuilder

and create the form controls, e.g.

this.myForm = this.fb.group({ age: [], ageUnit: [] })

.

To obtain the two source streams, we simply listen to the

valueChanges

of each control:

The

valueChanges

observable can be refined with common RxJS operators:

.debounceTime(500)

to ignore rapid keystrokes,

.distinctUntilChanged()

to suppress duplicate values, and

.startWith(initialValue)

to provide an initial emission.

Async Pipe

Normally you would manually subscribe to an Observable and unsubscribe in

ngOnDestroy

to avoid memory leaks. Angular’s

async

pipe automates this: it subscribes when the component is created and unsubscribes when it is destroyed.

By using the pipe in the template, e.g.

[value]="computed$ | async"

, the input’s value is bound to the latest emission of

computed$

without any explicit subscription code.

Angular 4 ngIf Improvements

Angular 4 adds an

else

clause to

ngIf

, allowing a single directive to handle both true and false cases with template references.

It also supports assigning the result of the condition to a local variable, reducing repetitive

(auth$|async)

expressions.