https://github.com/qoollo/ngx-form-url-saver
https://github.com/qoollo/ngx-form-url-saver
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/qoollo/ngx-form-url-saver
- Owner: qoollo
- License: mit
- Created: 2023-03-17T08:35:24.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-07T09:42:49.000Z (almost 3 years ago)
- Last Synced: 2025-10-28T10:07:54.268Z (8 months ago)
- Language: TypeScript
- Size: 186 KB
- Stars: 3
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# :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
```
Afret using directive
```html
```
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 |