Last update on Saturday, September 16th 2017

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:

npm i --save redux redux-logger @angular-redux/form @angular-redux/store

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

import { FormsModule } from '@angular/forms';

import { NgReduxModule } from '@angular-redux/store';
import { NgReduxFormModule } from '@angular-redux/form';

  imports: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}
  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:

  <form #userForm="ngForm" connect="myForm" (ngSubmit)="onFormSubmitted()">

        <input type="text" name="name" placeholder="Name" ngControl ngModel required>

        <input type="email" name="email" placeholder="Email" ngControl ngModel required>

    <div ngModelGroup="address">

          <input type="text" name="country" placeholder="Country" ngControl ngModel required>

          <input type="text" name="city" placeholder="City" ngControl ngModel required>


    <input type="submit" [disabled]="userForm.invalid">


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:

import { defaultFormReducer} from '@angular-redux/form';
import { NgRedux, DevToolsExtension } from '@angular-redux/store';

declare var require;

var reduxLogger = require('redux-logger');

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  constructor(public store: NgRedux<any>, public devTools: DevToolsExtension) {

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:

  constructor(public store: NgRedux<any>, public devTools: DevToolsExtension) {

    const INITIAL_STATE = {
      myForm: {
        name: '',
        email: '',
        address: {
          country: '',
          city: ''

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:
      devTools.isEnabled() ? [devTools.enhancer()] : []);

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

  onFormSubmitted() {
    // Do the work here

And voila!

We have our form updating our Redux store:

ionic redux template-driven forms

Stay up to date

Join over 4000 other developers who already receive my tutorials and their source code out of the oven + other free stuff!