@qoollo/ngx-form-url-saver
Version:
Angular directive for syncing form's data with URL query
70 lines (48 loc) • 3.54 kB
Markdown
# :whale: Qoollo ngx-form-url-saver :whale:
| **Package** | **Version** | **README** | **Downloads** |
|----------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------|
| [@qoollo/ngx-form-url-saver](https://npmjs.com/package/@qoollo/ngx-form-url-saver) |  | [](projects/form-url-saver-lib/README.md) | [](https://npmjs.com/package/@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](https://qoollo.github.io/ngx-form-url-saver/?firstName=%22Hello%22&secondName=%22World%22)
## 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](https://angular.io/api/forms/FormGroupDirective), so you can just replace `[formGroup]` to `[ngxFormUrlSaver]`.
Component code
```ts
public form = new FormGroup({
searchString: new FormControl(''),
});
```
Template code
Before using directive
```html
<form [formGroup]="form">
<input formControlName="searchString">
</form>
```
Afret using directive
```html
<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 |