Ultra-reactive Forms for Angular 📝🤩

Because Angular Forms are not really reactive

Overview

What? 🤔

This is a small library that makes Angular Forms really reactive!

• Reactive (and type-safe!) 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:

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:

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!

import { FormControl, FormGroup } from 'ngx-ultra-reactive-forms';

@Component({ /* ... */ })
class YourComponent {
  myControl = new FormControl<string>();
  
  myFormGroup = new FormGroup<Person>({
    name: new FormControl(),
    birthDate: new FormControl()
  });
  
  formGroupValid$: Observable<boolean>;
  
  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.

Additional reactive properties

We also provide additional reactive properties.

• value$
• error$
• enabled$
• pristine$
• valid$
• status$

Check out the whole list.

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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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