ng2-redux-form

ng2-redux-form


This library is a thin layer of connective tissue between Angular 2 forms and
Redux. It provides unidirectional data binding between your Redux state and
your forms elements. It builds on existing Angular functionality like
NgModel
and
NgControl

For the simplest use-cases, the API is very straightforward. Your template
would look something like this:

``html







`

The important bit to note here is the [connect] directive. This is the only thing
you should have to add to your form template in order to bind it to your Redux state.
The argument provided to connect is basically a path to form state inside of your
overall app state. So for example if my Redux app state looks like this:

`json
{
"foo": "bar",
"myForm": {
"address": "1 Foo St."
}
}
`

Then I would supply myForm as the argument to [connect]. If myForm were nested
deeper inside of the app state, you could do something like this:

`html



...



`

Note that ImmutableJS integration is provided seamlessly. If personalInfo is an
immutable Map structure, the library will automatically use get() or getIn() to
find the appropriate bits of state.

Then, in your application bootstrap code, you need to add a provider for
the class that is responsible for connecting your forms to your Redux state.
There are two ways of doing this: either using an Redux.Store object or
an NgRedux object. There are no substantial differences between these
approaches, but if you are already using
ng2-redux or you wish to integrate
it into your project, then you would do something like this:

`typescript
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
NgReduxForms,
],
providers: [
NgRedux,
],
bootstrap: [MyApplicationComponent]
})
export class ExampleModule {}
`

Or if you are using Redux without ng2-redux, then your bootstrap call would look
more like this (substitute your own store creation code):

`typescript
import {provideReduxForms} from 'ng2-redux-form';

const storeCreator = compose(applyMiddleware(logger))(createStore);
const store = create(reducers, {});

@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
NgReduxForms,
],
providers: [
provideReduxForms(store),
],
bootstrap: [MyApplicationComponent]
})
export class ExampleModule {}
`

The essential bit of code in the above samples is the call to provideReduxForms(...).
This configures ng2-form-redux and provides access to your Redux store or NgRedux
instance. The shape of the object that provideReduxForms expects is very
basic:

`typescript
export interface AbstractStore {
/// Dispatch an action
dispatch(action: Action & {payload?}): void;

/// Retrieve the current application state
getState(): RootState;

/// Subscribe to changes in the store
subscribe(fn: () => void): Redux.Unsubscribe;
}
`

Both NgRedux and Redux.Store conform to this shape. If you have a more
complicated use-case that is not covered here, you could even create your own store
shim as long as it conforms to the shape of AbstractStore.

$3

The bindings work by inspecting the shape of your form and then binding to a Redux
state object that has the same shape. The important element is NgControl::path.
Each control in an Angular 2 form has a computed property called path which uses
a very basic algorithm, ascending the tree from the leaf (control) to the root
(the

element) and returning an array containing the name of each group or
array in the path. So for example, let us take a look at this form that lets the
user provide their full name and the names and types of their children:

`html




`

Our root

element has a connect directive that points to the state element
form1. This means that the children within your form will all be bound to some
bit of state inside of the form1 object in your Redux state. Then we have a child
input which is bound to a property called fullname. This is a basic text box. If
you were to inspect it in the debugger, it would have a path value like this:

`
['form1', 'fullname']
`

And therefore it would bind to this piece of Redux state:

`json
{
"form1": {
"fullname": "Chris Bond"
}
}
`

So far so good. But look at the array element inside our form, in the