Last update on Saturday, January 12th 2019

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';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    FormsModule,
    NgReduxFormModule,
    NgReduxModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {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()">

    <div>
      <label>
        <span>Name</span>
        <input type="text" name="name"
               placeholder="Name" ngControl ngModel required>
      </label>
    </div>

    <div>
      <label>
        <span>Email</span>
        <input type="email" name="email" placeholder="Email"
               ngControl ngModel required>
      </label>
    </div>

    <div ngModelGroup="address">

      <div>
        <label>
          <span>Country</span>
          <input type="text" name="country" placeholder="Country"
                 ngControl ngModel required>
        </label>
      </div>

      <div>
        <label>
          <span>City</span>
          <input type="text" name="city" placeholder="City"
                 ngControl ngModel required>
        </label>
      </div>

    </div>

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

  </form>

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');

@Component({
  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:

    this.store.configureStore(
      defaultFormReducer(),
      INITIAL_STATE,
      [reduxLogger.createLogger()],
      devTools.isEnabled() ? [devTools.enhancer()] : []);
  }

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

  onFormSubmitted() {
    console.log(this.store.getState());
    // Do the work here
  }

And voila!

We have our form updating our Redux store:

ionic redux template-driven forms

Using Redux Reactive Forms With Ionic in One Go

Learn how to mix together...

Adding Redux to an Ionic Application

Learn how to mix together your...

Angular 2 Reactive Forms in One Go

This tuts will quickly show you...

Stay up to date


Join over 4000 other developers who already receive my tutorials and their source code out of the oven with other free JavaScript courses and an Angular cheatsheet!
Designed by Jaqsdesign