qoollo/ngx-form-url-saver

🐳 Qoollo ngx-form-url-saver 🐳

Package	Version	README	Downloads
@qoollo/ngx-form-url-saver

Description

This FormUrlSaverDirective allows writing any form's data to an URL string and restore own state from it.
You no need to write any bolierplate code, it can replace default [formGroup] directive in any tempalte.

Live demo

Test all directive's features by live demo

Usage

E.g. You want to save your search data after page reloading. For this case you can use this directive.

This directive extends base Angular FormGroupDirective, so you can just replace [formGroup] to [ngxFormUrlSaver].

Component code

public form = new FormGroup({
    searchString: new FormControl(''),
});

Template code

Before using directive

<form [formGroup]="form">
    <input formControlName="searchString">
</form>

Afret using directive

<form [ngxFormUrlSaver]="form">
    <input formControlName="searchString">
</form>

When form will change it's value, a new query params will push to URL.
In expample the query will be ?searchString="..."

State restoring

After page reloading form will parses all query and restore own state by them.
And then form will be sync state with URL as always.

Features

• Allows to set debounce time to query update
• Can work in two query-parametres creation modes:

1. 'separated' - All form's fields will write in separate query-params by its names. E.g ?firstName="Hello"&secondName="World"
2. 'united' - All form will be write in one query parameter (with name form by default). E.g /?form=%7B"firstName":"","secondName":""%7D

Options

Option	Type	Default	Description
debounceTime	number	500	Debounce time in ms
strategy	'united' \ 'separated'	'united'	Query creation strategy
queryKey	string	'form'	Default query parameter for united strategy