
However, they notably diverge in terms of philosophy, programming style and technique. These two belong to the library and share a series of form control classes. Get these beautiful forms Angular Reactive Forms vs Template Driven FormsĪngular offers two form-building technologies: reactive forms and template-driven forms. However, if you are interested in building a complete mobile app with Ionic and the MEAN (MongoDB, Express, Angular and NodeJS) stack, you should check Build a complete mobile app with Ionic. There are different ways of sending and handling that data in the server, and depends a lot on your backend tech stack and the nature of your business logic, so we are not going to cover this. Let's keep in mind that the real purpose of forms is data collection. Commonly, the data is sent to the web server, but the app can also intercept it to use it on its own. (if you didn't know this, you should consider reading Ionic Framework introduction and key components).įorms are usually one of the major interaction points between an app and the user, allowing them to send data to the application. As you may know, Ionic is built on top of Angular. When developing a form, it's important to create a good data-entry experience to efficiently guide the user through the workflow.ĭeveloping good forms requires design and user experience skills, as well as a framework with support for two-way data binding, change tracking, validation, and error handling such as Angular. You can use forms to perform countless data-entry tasks such as: login, submit a request, place an order, book a flight or create an account.

Working With Formsįorms are the pillar of any business applications.

We want this to be the best Ionic 5 forms tutorial, so we created advanced custom validators to show you how to validate passwords, phone numbers and unique usernames. I will explain to you the core concepts of: FormControl, FormGroup, FormBuilder, and Validators and show you examples, so you can learn to use them properly. You can check the online demo of the Ionic 5 example app we will build for this form tutorial.

Then we will go through the differences between Angular template driven and reactive forms.įor this Ionic tutorial we created a mobile app example with lots of forms and validations to help you master data collection using Angular reactive forms and also some techniques to excel the user experience. We will discuss the best practices for designing user-friendly forms with Ionic. In this tutorial you will learn everything about Ionic forms and input validations in Ionic apps.
