Using Redux Template-Driven Forms With Ionic in One Go

We have already seen what Template-Driven Forms are and how to use them with Angular in a previous tutorial.
In this one we take another approach by coupling it with Redux in an Ionic application. You should have a look at the Redux introduction and the time travel tutorial if you are not familiar with this new technology.

As usual we install the libraries:

We start by adding importing the Modules in the app.module.ts file:

  1. FormsModule is Angular’s module for creating template-driven forms
  2. NgReduxModule is Redux Core Angular module
  3. NgReduxFormModule is the extension for the forms feature

The home.html form is very similar to a normal template-driven one:

Two differences here:

  1. The connect Directive: Generally a directive accepts a property like user, data, etc. This one will go through the Redux Store and grab the myForm field from the current state (like a select would)
  2. The onFormSubmitted method: We don’t need to pass the form here. This method will work with the Redux Store’s state

Moving on to the home.ts file, starting with the imports and injections:

The defaultFormReducer contains the angular-redux form basic reducer. It handles the FORM_CHANGED action and updates the Redux Store for us.

As usual, the store and devTools Providers are injected.

The Store’s INITIAL_STATE is then created:

The angular-redux form’s connect directive will look for the myForm field then go through each sub-fields to map them to the ngControls and the address ngModelGroup.

Finally the store is configured:

Not forgetting the last touch, which is the onFormSubmitted method:

And voila!

We have our form updating our Redux store:

ionic redux template-driven forms

Enter your email address in the box below to get access to this tutorial (and others) source code.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *