@ngxs/form-plugin

Form Plugin

Often when building Reactive Forms in Angular, you need to bind values from the store to form and vice versus. The values from the store are observable and the reactive form accepts raw objects, as a result we end up monkey patching this back and forth.

Binding the values is not the only thing we commonly do, its not un-typical to translate form dirty status or form errors. Typical workflows might include reading the errors from the form to show in various decoupled components or for use in our effects or using the form dirty status to prevent users from leaving a page without saving but without binding a variable we have no way to reset the status of the form after a successful save from an effect.

In addition to these issues we encounter, there are workflows where you want to fill out a form and leave and then come back and resume your current status. This is an excellent use case for stores and we can conquer that case with this plugin.

In a nutshell, this plugin helps to keep your forms and state in sync.

Configuration

In the root module of your application, import NgxsFormPluginModule and include it in the imports.

import { NgxsFormPluginModule } from 'ngxs';

@NgModule({
  imports: [
    NgxsModule.forRoot(states),
    NgxsFormPluginModule.forRoot(),
  ]
})
export class AppModule {}

Form State

Define your default form state as part of your application state.

@State({
  name: "todos",
  defaults: {
    pizzaForm: {
      model: undefined,
      dirty: false,
      status: "",
      errors: {}
    }
  }
})

Form Setup

In your component, you would implement the a reactive form and decorate the form with the ngxsForm directive with the path of your state object. We are passing the string path to ngxsForm. The directive uses this path to connect itself to the store and setup bindings.

@Component({
    template: `
        <form [formGroup]="pizzaForm" novalidate (ngSubmit)="onSubmit()" ngxsForm="todos.pizzaForm">
            <input type="text" formControlName="toppings" />
            <button type="submit">Order</button>
        </form>
    `
})
export class PizzaComponent {
    pizzaForm = this.formBuilder.group({
        toppings: ['']
    });
}

Now anytime your form updates, your state will also reflect the new state.

The directive also has 2 inputs you can utilize as well:

• ngxsFormDebounce: number - Debounce the value changes to the form. Default value: 100.
• ngxsFormClearOnDestroy: boolean - Clear the state on destroy of the form.

Actions

In addition to it automatically keeping track of the form, you can also manually dispatch actions for things like resetting the form state. For example:

this.store.dispatch(
    new UpdateFormDirty({
        dirty: false, path: 'todos.pizzaForm'
    })
);

The form plugin comes with following actions out of the box are:

• UpdateFormStatus({ status, path }) - Update the form status
• UpdateFormValue({ value, path }) - Update the form value
• UpdateFormDirty({ dirty, path }) - Update the form dirty status
• SetFormDisabled(path) - Set the form to disabled
• SetFormEnabled(path) - Set the form to enabled
• SetFormDirty(path) - Set the form to dirty (shortcut for UpdateFormDirty)
• SetFormPristine(path) - Set the form to prestine (shortcut for UpdateFormDirty)