Data Input Using Reactive Forms

Reactive Forms

Another approach to developing forms with angular involves defining their structure from within the class instead of within the template. This approach, known as Reactive Forms, affords the following functionality:

• Implements validation rules for input fields.
• Updates the form UI to help guide user behavior (for example, disabling buttons where required input fields have not been completed and displaying error messages).
• Listens for value changes on input fields.

Using Reactive Forms, we can programmatically build our forms and use that logic to control the input fields and form state in our templates.

Creating a new app

We start by creating a new project by running the following command:

ionic start advanced-form blank --type=angular

The home component

In the advanced-form/src/app/home/home.page.ts file, we make the following amendments (highlighted):