Type-safe Forms for Angular 📝

Because FormControl<T> is more awesome than FormControl!

Using Angular 14?

If you are using Angular 14 or higher, there is no need for using this library. Instead, we recommend you to use the default Angular type-safe forms in that case.

If you still want to use some of the additional features mentioned below, we recommend version 2.0 of this library, which is compatible with Angular 14.

| Angular version | Version | |---------------------|-----------------------------------------------------------------------:| | Angular 16 | 2.2.x | | Angular 15 | 2.1.x | | Angular 14 | 2.x.x | | Angular 13 | 1.6.x | | Angular 12 | 1.5.x | | Angular 11 | 1.4.x | | Angular 10 or lower | 1.3.x |

Overview

What? 🤔

A small library to make Angular Forms more type-safe!

• Type-safe versions of FormControl, FormGroup, FormArray and ControlValueAccessor
• 100% compatible with @angular/forms and existing Angular libraries!
• Easy to use!
• Additional read-only properties value$, valid$, pristine$, errors$, enabled$ and more.
• A default implementation for ControlValueAccessor
• Type-safe validators

Why? 🤷‍♂️

Angular Forms are not very type-safe (at least, up until Angular 13). This library makes your form code more type-safe. More type-safety means smaller risks for bugs!

Installation 🌩

npm

npm install ngx-typesafe-forms

yarn

yarn add ngx-typesafe-forms

Usage 🕹

Basic example

Just import your FormControl, FormGroup, FormArray and ControlValueAccessor from ngx-typesafe-forms instead of @angular/forms and you are done!

Additional reactive properties

Besides the type-safety, we also provide additional reactive properties.

const myControl = new FormControl<string>('bar');

// subscribe to all values, including the existing value!
myControl.value$.subscribe((value) => {
  /* ... */
});

// subscribe to validity changes, including the existing valid state!
myControl.valid$.subscribe((valid) => {
  /* ... */
});

The recommended properties are:

• value$
• errors$
• enabled$
• pristine$
• valid$
• status$
• validValue$
• rawValue$

Additionally, we also provide some of their counterparts:

• disabled$
• dirty$
• invalid$

NOTE: all of these streams also include the current (initial) values.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!