Reactive forms in Ionic 4 | Angular

Ionic 4

Ionic is the app development platform for web developers. We can create both android and ios applications while working in it. You can use any of Angular, React, Vue or Javascript with ionic, this makes ionic more generic and language independent platform. Vue support is however still in its beta version while angular, react and javascript support has been fully officially released by ionic team.

This topic will cover how we can create a reactive form in ionic 4.

Create a new Ionic 4 project using CLI in folder of your choice.

ionic start sign-in-form blank

Instead of using “blank” we have two other templates “sidemenu” and “tabs”.

After creation in CLI go to project directory serve the project using command line

ionic serve

Your project in browser will look like this

In your home.module.ts add “ReactiveFormsModule” in imports as shown in picture below:

In home.page.ts we initialize signInForm that we will use in this component.

In home.component.ts we will write our html code with ionic components:

As we have added a click event in our form to submit our form we will create a function in home.component.ts “login()” as shown below:

When we click on login button after input username and password our login function will run and we could see output in console.

Note: Both username and password fields are mandatory otherwise button will remain disabled as we have written [disabled]=”signInForm.invalid” in our button tag.

Final output: You can see form value as an object in console logs.