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:
- FormsModule is Angular’s module for creating template-driven forms
- NgReduxModule is Redux Core Angular module
- NgReduxFormModule is the extension for the forms feature
The home.html form is very similar to a normal template-driven one:
Two differences here:
- 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)
- 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:
We have our form updating our Redux store: