Introduction To Angular Forms And Form Validation

In this article, I will explain about validating user inputs using Angular forms. Generally speaking, , forms are used to handle user’s input! With the help of forms, we can do CRUD operations such as create, read, update, delete. Basically, speaking of forms in Angular, Angular forms are classified into two types, such as Reactive forms and Template-driven method. Both types of forms are being used to collect input from the user. Before getting started with form validation we can take an overview of both Reactive and Template-driven method.

The reactive forms are also called Model-driven forms, the reactive forms provide an approach for UI to handle the input towards the component variable. It can be used with complex forms with a greater number of form fields but it requires multiple complex validations in which custom validations are involved in it. The reactive forms require the JSON structure to be sent with values in the form.

The template-driven method is very useful in using simple forms like login forms, the template-driven method uses two-way data binding, so with the help of two-way data binding, we can assign a value to a variable from the UI. This type of form is used in very basic forms and requires simple logic.

So, in this article, we will be seeing about designing a form and performing form validation using the template-driven method, in addition to that I have uploaded source code containing some additional files such as config.JSON, EmployeeService.ts service file and as well as a model class file named as employee.ts. This article's source code will be continued in the next article, where we will see about pushing input values from a form to a list. Now in this article, we are about to use third-party libraries like bootstrap and you can find more information about bootstrap from the following link; also the main point is we can track the control state and validity with the model.

By using ngModel in a form, the ngModel directive doesn’t just track only the state, it will also update the controls in an angular class state like:

Now coming to the main process, let’s start by creating a new Angular application by using the following command

After creating a new Angular application now, we can add bootstrap to the project by using the following command.

after adding bootstrap to the library function open index.html add the following code inside of the head tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

After that now we can create a form and perform validation using the template-driven method. Create a new component using the following command

Here I have created a new component name as employee; now open employee.component.html and replace the following code as mentioned below.