Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dirkluijk/ngx-typesafe-forms

Because FormControl<T> is more awesome than FormControl!
https://github.com/dirkluijk/ngx-typesafe-forms

angular forms generics reactive typescript

Last synced: 12 days ago
JSON representation

Because FormControl<T> is more awesome than FormControl!

Host: GitHub
URL: https://github.com/dirkluijk/ngx-typesafe-forms
Owner: dirkluijk
License: mit
Created: 2019-10-22T15:00:52.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2024-01-05T15:05:59.000Z (10 months ago)
Last Synced: 2024-09-19T05:06:29.532Z (about 2 months ago)
Topics: angular, forms, generics, reactive, typescript
Language: TypeScript
Homepage:
Size: 1010 KB
Stars: 40
Watchers: 2
Forks: 12
Open Issues: 18
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # Type-safe Forms for Angular 📝

> Because `FormControl` is more awesome than `FormControl`!

[![NPM version](http://img.shields.io/npm/v/ngx-typesafe-forms.svg?style=flat-square)](https://www.npmjs.com/package/ngx-typesafe-forms)

[![NPM downloads](http://img.shields.io/npm/dm/ngx-typesafe-forms.svg?style=flat-square)](https://www.npmjs.com/package/ngx-typesafe-forms)

![Build status](https://github.com/dirkluijk/ngx-typesafe-forms/actions/workflows/main.yml/badge.svg?branch=master)

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

## 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](https://angular.io/guide/typed-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`](https://github.com/dirkluijk/ngx-typesafe-forms/tree/v2.2.0) |

| Angular 15          | [`2.1.x`](https://github.com/dirkluijk/ngx-typesafe-forms/tree/v2.1.0) |

| Angular 14          | [`2.x.x`](https://github.com/dirkluijk/ngx-typesafe-forms/tree/v2.0.0) |

| Angular 13          | [`1.6.x`](https://github.com/dirkluijk/ngx-typesafe-forms/tree/v1.6.1) |

| Angular 12          | [`1.5.x`](https://github.com/dirkluijk/ngx-typesafe-forms/tree/v1.5.2) |

| Angular 11          | [`1.4.x`](https://github.com/dirkluijk/ngx-typesafe-forms/tree/v1.4.3) |

| Angular 10 or lower | [`1.3.x`](https://github.com/dirkluijk/ngx-typesafe-forms/tree/v1.3.1) |

## 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.

```typescript

const myControl = new FormControl('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](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Dirk Luijk}
💻 📖

    
_{Daan Scheerens}
🤔

    
_{Jur Balledux}
🐛 💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!