Home

Awesome

@larscom/ngrx-store-formsync

npm-version npm license

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

Features

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 {}
  1. 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

AttributeTypeDefaultRequiredDescription
formGroupUntypedFormGroupundefinedyesThe form group which needs to get synced to the store.
storeFormSyncIdstring | numberundefinedyesThe unique ID for the form group.
syncDisabledbooleanfalsenoWhether the form group value should sync to the store.
syncOnSubmitbooleanfalsenoOnly sync to the store when submitting the form.
syncRawValuebooleanfalsenoSync the raw form value to the store (this will include disabled form controls)
syncValidOnlybooleanfalsenoOnly sync to the store when the form status is valid.
syncInitialValuebooleantruenoWhether 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.