Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/larscom/ngrx-store-formsync
Synchronize any reactive form to @ngrx/store (Angular)
https://github.com/larscom/ngrx-store-formsync
angular forms ngrx ngx observables reactive-forms redux rxjs state store
Last synced: 4 days ago
JSON representation
Synchronize any reactive form to @ngrx/store (Angular)
- Host: GitHub
- URL: https://github.com/larscom/ngrx-store-formsync
- Owner: larscom
- License: mit
- Created: 2021-11-21T21:43:48.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-01T10:03:57.000Z (11 days ago)
- Last Synced: 2024-12-01T11:19:00.660Z (11 days ago)
- Topics: angular, forms, ngrx, ngx, observables, reactive-forms, redux, rxjs, state, store
- Language: TypeScript
- Homepage:
- Size: 1.9 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngrx-store-formsync - Synchronize any reactive form to `@ngrx/store`. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngrx-store-formsync - Synchronize any reactive form to `@ngrx/store`. (Table of contents / Third Party Components)
README
# @larscom/ngrx-store-formsync
[](https://www.npmjs.com/package/@larscom/ngrx-store-formsync)
[](https://github.com/larscom/ngrx-store-formsync/blob/main/LICENSE)
> Synchronize any **reactive form** to **@ngrx/store** (Angular)
## Features
- ✓ Sync Reactive Forms only
- ✓ [Persist State](#Persisting-State) (needs additional library)
## Dependencies
`@larscom/ngrx-store-formsync` depends on [@ngrx/store](https://github.com/ngrx/store) and [Angular](https://github.com/angular/angular).
## Installation
```bash
npm install @larscom/ngrx-store-formsync
```
## Usage
1. Import `StoreFormSyncModule.forRoot()` only once. For additional modules import `StoreFormSyncModule`
```ts
import { NgModule } from '@angular/core'
import { StoreModule } from '@ngrx/store'
import { StoreFormSyncModule } from '@larscom/ngrx-store-formsync'
@NgModule({
imports: [
StoreModule.forRoot(),
StoreFormSyncModule.forRoot() // import StoreFormSyncModule.forRoot()
]
})
export class AppModule {}
```
2. Add the `storeFormSyncId` attribute to the same element as `formGroup`
```html
Submit
```
Your formGroup will now get synced to the `@ngrx/store`
## StoreFormSync Directive API
| Attribute | Type | Default | Required | Description |
| ------------------ | ---------------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `formGroup` | UntypedFormGroup | undefined | yes | The form group which needs to get synced to the store. |
| `storeFormSyncId` | string \| number | undefined | yes | The unique ID for the form group. |
| `syncDisabled` | boolean | false | no | Whether the form group value should sync to the store. |
| `syncOnSubmit` | boolean | false | no | Only sync to the store when submitting the form. |
| `syncRawValue` | boolean | false | no | Sync the raw form value to the store (this will include disabled form controls) |
| `syncValidOnly` | boolean | false | no | Only sync to the store when the form status is valid. |
| `syncInitialValue` | boolean | true | no | Whether the form group value should sync to store when the directive is alive. When disabled, syncing will start when the form value changes |
## Managing form with actions and selectors
### Get form value
```ts
import { Component } from '@angular/core'
import { storeSelectors } from '@larscom/ngrx-store-formsync' // import selectors
import { Store, select } from '@ngrx/store'
@Component({
selector: 'app-component',
template: `
My Form Value
{{ myFormValue$ | async | json }}
`,
styleUrls: ['app.component.scss']
})
export class AppComponent {
myFormValue$ = this.store.pipe(select(storeSelectors.selectFormValue({ storeFormSyncId: 'myId' })))
constructor(private readonly store: Store) {}
}
```
### Set form value
```ts
import { Component } from '@angular/core';
import { storeActions } from '@larscom/ngrx-store-formsync'; // import actions
import { Store, select } from '@ngrx/store';
@Component({
selector: 'app-component',
templateUrl: 'app.component.html'
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(private readonly store: Store) {}
setForm(): void {
const value = {
firstName: 'Jan',
lastName: 'Jansen'
};
this.store.dispatch(storeActions.setForm({ storeFormSyncId: 'myId', value }));
}
}
```
### Patch form value
```ts
import { Component } from '@angular/core';
import { storeActions } from '@larscom/ngrx-store-formsync'; // import actions
import { Store, select } from '@ngrx/store';
@Component({
selector: 'app-component',
templateUrl: 'app.component.html'
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(private readonly store: Store) {}
patchForm(): void {
const value = {
firstName: 'Jan' // lastName can be omitted
//lastName: 'Jansen'
};
this.store.dispatch(storeActions.patchForm({ storeFormSyncId: 'myId', value }));
}
}
```
### Delete form value
```ts
import { Component } from '@angular/core';
import { storeActions } from '@larscom/ngrx-store-formsync'; // import actions
import { Store, select } from '@ngrx/store';
@Component({
selector: 'app-component',
templateUrl: 'app.component.html'
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(private readonly store: Store) {}
deleteForm(): void {
this.store.dispatch(storeActions.deleteForm({ storeFormSyncId: 'myId'}));
}
}
```
### Delete all form values
```ts
import { Component } from '@angular/core';
import { storeActions } from '@larscom/ngrx-store-formsync'; // import actions
import { Store, select } from '@ngrx/store';
@Component({
selector: 'app-component',
templateUrl: 'app.component.html'
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(private readonly store: Store) {}
deleteAll(): void {
this.store.dispatch(storeActions.deleteAll());
}
}
```
## Persisting State
This library works well with [@larscom/ngrx-store-storagesync](https://github.com/larscom/ngrx-store-storagesync)
You can persist the state of your forms to `localStorage/sessionStorage` in a few seconds.
```ts
import { storeFormSyncKey } from '@larscom/ngrx-store-formsync' // import storeFormSyncKey
export function storageSyncReducer(reducer: ActionReducer): ActionReducer {
const metaReducer = storageSync({
features: [
{
stateKey: storeFormSyncKey // add storeFormSync as feature
}
],
storage: window.localStorage
})
return metaReducer(reducer)
}
```
Head over to [@larscom/ngrx-store-storagesync](https://github.com/larscom/ngrx-store-storagesync) on how to configure that library.