Introducing (Angular Reactive) Forms with Benefits 😉

How many times have you told yourself “I wish Angular Reactive Forms would support types”, or “I really want API to query the form reactively. It missed some methods.”

Your wish is my command! This library extends every Angular AbstractControl, and provides features that don’t exist in the original one. It adds types, reactive queries, and helper methods.

The most important thing is that you can start using it today! In most cases, the only thing that you need to change is the import path. So don’t worry, no form refactoring required — we’ve got you covered; One schematics command, and you’re done:

Let’s take a look at some of the neat things we provide:

Control Type

Each AbstractControl takes a generic, which serves as the type for any method or property exposed by Angular or this library:

Use it with a FormControl:

Use it with a FormGroup:

Use it with a FormArray:

Control Queries

value$

Observes the control’s value. Unlike the behavior of the built-in valueChanges observable, it emits the current rawValue immediately (which means you’ll also get the values of disabled controls).

disabled$

Observes the control’s disable status.

status$

Observes the control’s status.

The status is typed as ControlState (valid, invalid, pending or disabled).

errors$

Observes the control’s errors.

select()

Selects a slice of the form’s state based on the given predicate.

And more! Check out the documentation for the complete list.

Control Methods

setValue()

In addition to the built-in method functionality, it can also take an observable.

patchValue()

In addition to the built-in method functionality, it can take an observable or a callback function.

disabledWhile()

Takes an observable that emits a boolean indicating whether to disable the control.

mergeValidators()

Unlike the built-in setValidator() method, it persists any existing validators.

markAllAsDirty()

Marks all the group’s controls as dirty.

hasErrorAndTouched()

A syntactic sugar method to be used in the template:

setDisable()

Sets whether the control is disabled.

getControl()

A method with typed parameters which obtains a reference to a specific control.

Note that the return type should still be inferred.

And more! Check out the documentation for the complete list.

Control Errors

Each AbstractControl takes a second generic, which serves as the type of the errors:

The library provides a type for the built-in Angular validators types:

ControlValueAccessor

The library exposes a typed version of ControlValueAccessor, which already implements registerOnChange and registerOnTouched under the hood:

Note that you can also use it as interface.

Form Builder

We also introduce a typed version of FormBuilder which returns a typed FormGroup, FormControl and FormArray with all our sweet additions:

ESLint Rule

We provide a special lint rule that forbids the imports of any token we expose such as FormControl, FormGroup, FormBuilder and FormArray from @angular/forms. Check out the documentation.

A big thanks to our contributors — Dan Roujinsky, Itay Oded, Colum Ferry, and Inbal Sinai.

🚀 In Case You Missed It

Here are a few of my open source projects:

• Akita: State Management Tailored-Made for JS Applications
• Spectator: A Powerful Tool to Simplify Your Angular Tests
• Transloco: The Internationalization library Angular
• Forms Manager: The Foundation for Proper Form Management in Angular
• Cashew: A flexible and straightforward library that caches HTTP requests

And many more!

Follow me on Medium or Twitter to read more about Angular, Akita and JS!