Skip to content

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

License

Notifications You must be signed in to change notification settings

larscom/ngrx-store-formsync

Repository files navigation

@larscom/ngrx-store-formsync

npm-version npm license

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

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.