@larscom/ngrx-store-formsync

Synchronize any reactive form to @ngrx/store (Angular)

Features

• ✓ Sync Reactive Forms only
• ✓ Persist State (needs additional library)

Dependencies

@larscom/ngrx-store-formsync depends on @ngrx/store and Angular.

Installation

npm install @larscom/ngrx-store-formsync

Usage

1. Import StoreFormSyncModule.forRoot() only once. For additional modules import StoreFormSyncModule

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

<form [formGroup]="myFormGroup" storeFormSyncId="1">
  <div>
    <input formControlName="firstName" />
    <input formControlName="lastName" />
  </div>
  <button type="submit">Submit</button>
</form>

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

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: `
    <div>
      <h1>My Form Value</h1>
      {{ myFormValue$ | async | json }}
    </div>
  `,
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  myFormValue$ = this.store.pipe(select(storeSelectors.selectFormValue({ storeFormSyncId: 'myId' })))

  constructor(private readonly store: Store) {}
}

Set form value

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

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

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

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

You can persist the state of your forms to localStorage/sessionStorage in a few seconds.

import { storeFormSyncKey } from '@larscom/ngrx-store-formsync' // import storeFormSyncKey

export function storageSyncReducer(reducer: ActionReducer<IRootState>): ActionReducer<IRootState> {
  const metaReducer = storageSync<IRootState>({
    features: [
      {
        stateKey: storeFormSyncKey // add storeFormSync as feature
      }
    ],
    storage: window.localStorage
  })

  return metaReducer(reducer)
}

Head over to @larscom/ngrx-store-storagesync on how to configure that library.