Create Template-driven Search Form for Application
Let's create a template-driven search form for our Client Contact Manager application.
We'll cover the following...
Why use forms?
Forms are an extremely important part of any modern web application. Forms are used for logging into an application, updating a user profile, submitting an application, and so on. In our Client Contacts Manager application, we will be using forms to add new Clients and new Companies to it.
Types of forms
Angular provides two types of forms:
-
Reactive forms
-
Template-driven forms
In many ways, both types work in the same way:
-
They can both be used in the UI
-
They allow the user to validate input fields
*They both provide a model of the data being added via the form
But it’s how each form type handles and processes the data that’s submitted through the form that separates the two types.
The template-driven form is probably the one you’ve already used, even if you haven’t used a JavaScript framework before. An example of a template-driven form could be something like a simple login form or a small sign up form.
Reactive forms use the Reactive programming approach, which is something we will explore more in the RxJs section. Reactive forms are reusable, testable, and scalable because of this Reactive programming approach.
In order to see the differences between the two types of forms, it’s best to go through a working example. In our Client Contacts Manager application, we are going to start adding two forms to the application. One is a simple template-driven search form, while the other is an add Client form.
Create a search form
This simple search form will be used in the Clients section of our application. It will allow the user to search for a client using the client’s last name. However, before we start building out the template form, we need to make some changes to our application.
The first thing we need to do is create our new search form presentational component. Let’s go back to the Angular CLI, which will do this for us.
We’re not going to have all our components in the same folder. Instead, we’re going to start creating ...