https://github.com/dirkluijk/ngx-ultra-reactive-forms
Because Angular Forms are not really reactive.
https://github.com/dirkluijk/ngx-ultra-reactive-forms
angular forms reactive rxjs
Last synced: about 2 months ago
JSON representation
Because Angular Forms are not really reactive.
- Host: GitHub
- URL: https://github.com/dirkluijk/ngx-ultra-reactive-forms
- Owner: dirkluijk
- License: mit
- Created: 2019-10-25T14:50:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T11:05:35.000Z (over 3 years ago)
- Last Synced: 2025-02-09T15:11:29.908Z (over 1 year ago)
- Topics: angular, forms, reactive, rxjs
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/ultra-reactive-forms-demo
- Size: 4.27 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Ultra-reactive Forms for Angular 📝🤩
> Because Angular Forms are not really reactive
[](https://www.npmjs.com/package/ngx-ultra-reactive-forms)
[](https://www.npmjs.com/package/ngx-ultra-reactive-forms)
[](https://travis-ci.org/dirkluijk/ngx-ultra-reactive-forms)
[](#contributors-)
[](https://github.com/ngneat/spectator)
## Overview
### What? 🤔
This is a small library that makes Angular Forms really reactive!
* Reactive (and [type-safe][1]!) versions of `FormControl`, `FormGroup` and `FormArray`
* 100% compatible with `@angular/forms` and existing Angular libraries!
* Additional read-only properties `value$`, `valid$`, `pristine$`, `error$`, `enabled$` and more.
* Methods for `setValue$` and `setDisabled$`
### Why? 🤷♂️
Take the default `FormControl` from Angular.
To change its value, or to enable/disable it,
you need to subscribe to your `Observable` streams:
```typescript
const formControl = new FormControl();
const otherControl = new FormControl();
yourValue$.subscribe((value) => {
formControl.setValue(value);
});
otherControl.valueChanges.subscribe(() => {
if (otherControl.valid) {
formControl.enable();
} else {
formControl.disable();
}
});
```
With this library, this code can simply be written as:
```typescript
const formControl = new FormControl(yourValue$);
const otherControl = new FormControl('', {
disabled$: otherControl.invalid$
});
```
## Installation 🌩
##### npm
```
npm install ngx-ultra-reactive-forms
```
##### yarn
```
yarn add ngx-ultra-reactive-forms
```
## Usage 🕹
### Importing the module
First, you need to import the `UltraReactiveFormsModule` from `ngx-ultra-reactive-forms`.
This makes sure that the correct `[formControl]` directive is being used.
### Basic example
Then import your `FormControl`, `FormGroup`, `FormArray` and `ControlValueAccessor`
from `ngx-ultra-reactive-forms` (instead of `@angular/forms`) and you are done!
```typescript
import { FormControl, FormGroup } from 'ngx-ultra-reactive-forms';
@Component({ /* ... */ })
class YourComponent {
myControl = new FormControl();
myFormGroup = new FormGroup({
name: new FormControl(),
birthDate: new FormControl()
});
formGroupValid$: Observable;
constructor(private myService: MyService) {}
ngOnInit(): void {
this.myControl.setValue$(this.myService.someObservableString());
this.myFormGroup.setValue$(this.myService.someObservablePerson());
this.formGroupValid$ = this.myFormGroup.valid$;
}
}
```
### Type-safety
This library provides full type-safety, leveraged by [ngx-typesafe-forms][1].
### Additional reactive properties
We also provide additional reactive properties.
* `value$`
* `error$`
* `enabled$`
* `pristine$`
* `valid$`
* `status$`
Check out [the whole list][2].
## FAQ
### How does it work?
The `UltraReactiveFormsModule` exports the `ReactiveFormsModule` from Angular.
It also provides a special `[formControl]` directive that will detect the custom `FormControl`
automatically subscribe/unsubscribe from its reactive properties.
[1]: https://github.com/dirkluijk/ngx-typesafe-forms
[2]: https://github.com/dirkluijk/ngx-typesafe-forms#additional-reactive-properties
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
