Using Redux Reactive Forms With Ionic in One Go

After last week’s tutorial on Template-Driven Forms and Redux. Today we attack the Reactive side. We are very lucky because there aren’t many changes.
We have already seen what Reactive Forms are, how to use them and how to validate them in Angular.
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 importing the Modules in the app.module.ts file:

  1. ReactiveFormsModule is Angular’s module for creating reactive 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 reactive one:

The connect Directive will grab the myForm field from the Redux Store. The formGroup Directive will use a userForm property to handle everything related to validations. We will only make one validation by using an ngIf and the value.
The rest are some formControl and formGroup.

Moving on to the home.ts file 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. FormGroup and FormBuilder will help us build our reactive form:

The form’s structure is similar to the myForm field in the Store’s INITIAL_STATE:

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

The store is finally configured:

Let’s not forget to add the validation on the name field:

This will force the user to fill the name field.

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 *