Angular 2 Forms and Validations

Share On Facebook
Share On Google Plus
Share On Linkedin
Contact us

We use forms to take user input. In past times, Form handling was seems to be difficult task, mainly how valid is the user input. Nested if else statements even makes it tedious to built. Result is inconsistent, unmanageable, unpredictable results. Now Angular 2 makes easy to build, manage the forms, and take input from the user. Angular 2 makes it really easy to take user input, track changes, validate and show errors. So lets have a look what are Angular 2 forms.

Angular 2.x have two types of forms:-

  1. Template Driven Forms
  2. Model Driven Forms( also known as Reactive forms )

Template Driven Forms

This is not so different from as we used to do in the past to build forms in simple UI (HTML). These are basically simple HTML forms that are used to take input from the user.

Model Driven or Reactive Forms

Model Driven forms are simple forms similar to the Template Driven forms, difference is we have to declare the model of the form in the Component Class. This way we have more controls over the form, its input values, validations and the way we show error to the user.So lets take a look over the tutorial:-

In this tutorial we are going to show you how to use template driven and model driven forms and there differences. I you want the working code you can take it from
We use Angular-Cli for the set up of our application. So if you dont have Angular-Cli already installed, install it using npm.

Check you should have the latest version of the cli, my version is 1.0.0-beta.24. Now, lets make a new directory suppose angular_forms_tutorial.

and run the command

The ng init command will set up the angular 2 project (bootstrap your project), download all external dependencies and configure webpack, as you don’t have to worry about the configuration of the project. It will do for you. After running the command, when it completes run

and then type in the browser localhost:4200 and it will show you “app works!”.

TEMPLATE DRIVEN FORM

Let’s make different components that we will use in our application. Go to your src/app directory and make a new component called app.templatedrivenform.ts. In this file add:-

MODEL DRIVEN OR REACTIVE FORM

Now, make a new component – a model driven or reactive form. As by its name implies, Model driven form is a form which id bound to a model. So for model driven form a form model has be be defined in the component class. In src/app directory make a new component app.modeldrivenform.ts.

This time we use the separate file for the html markup of the component. It is by using thetemplateUrl property. Now add a file app.modeldrivenform.html in the src/app directory and add content just for the place holder, for now.

Note:- these are basically the forms provided by the Angular 2.x i.e. Model Driven forms also known as Reactive forms and the Template driven forms.

VALIDATION FORM

Now, make a new component in src/app directory, app.formvalidations.ts. In this file we will do our validation stuff. So go ahead and add code to this file.

Since, we just have to show how validation works, we can use inline html mark up for now. Best practice is to use separate file.So, far we made all of the components that we are going to use in out application. Before we use it, we have to include these components in our app. Our app must know where are these components, or we say we have to register these components with our application.

Register our Forms in the application

So now, we have to include these components in our root NgModule (@ngModule) to make them usable in our application. In src/app folder there is a file app.module.ts. Open it and include our forms as follows:-

Now, components that we made are finally included in our app. Open app.component.html and add the following code as:-

Here you see that we use tags:- template-driven, model-driven, form-validation remember, these are the selectors of components we made. One more thing that I used the bootstrap classes for styling html. So you need to import it in your index.html. as :-

Now run server if not running, by ng serveand view the result at http://localhost:4200. You should see the components displayed there.

#Template Driven form

Now I am going to show you how to work with the Template driven form. Basically for this has to work you can see in the app.module.ts. NgModule already imported the FormModule from @angular/forms library.

So, here in template driven form component we are going to create a simple form that take input from user, his email, password, date of birth (dob), gender i.e. male/female, and if he is interested in newsletter emails by simple checkbox.And there is a simple submit button that will submit the form. Go head and add following to the app.templatedrivenform.ts file as :-

Now, go to http://localhost:4200 in the browser and you will see the form there. Try to submit the form, and notice the required flag on the email, password and the date of birth inputs. Fill in the fields and you will be able to submit the form. And see the form values submitted in the browser console.Pretty simple. So this is the Template driven form, a simple html form that you create, fill and submit. For more advance control over the form functionality, its validations we are going to use the Model Driven form or simply reactive form.

#MODEL DRIVEN FORM (REACTIVE FORM)

Basically the difference between the template driven and the Model driven forms is that in Model driven forms we have to declare the model of the form in its component class and this way we have more control over the form, over the form controls, its inputs, tracking changes on value changes and other events and mainly the validations. So Behind the scenes it makes very easy to use the Model driven forms for the application functionality. So go ahead and add this html markup to the app.modeldrivenform.html file. Add this to app.modeldrivenform.html.

So now go to the app.modeldrivenform.ts file and update the code as follows:-

submitForm is the function to which the form will be submitted. See the (ngSubmit) in the form tag. Also notice, In the ModelDrivenForm class constructor we define the modeldrivenform model for the form, whose name i.e. ‘ModelDrivenForm’ is same as the formGroup of the html markup of the form as:-

Also the fields of the model corresponding to the formControl Property of the form elements:- eg: email in modeldrivenform model to the [formControl]="modelDrivenForm.controls['email']" in the html mark up of the email input. So this, way we declare the model of the model driven form in the component class.

Now, fill in the fields and submit the form to view the result in the browser console. To see the form head to the http://localhost:4200 and view the result.

#Validation of the Form

Now we made the app.formvalidations.ts component. In this component we will show you how to validate the Model Driven form. We have to import Validators from @angular/forms to use validations of the angular 2. Open the file app.formvalidations.ts and update the code as:-

As you can see in this component, we use the Validators of the angular/forms library. So we import it. See in the constructor as above we declare the validation of each property as:-

Interesting fact is that we can easily pass any number of validatons in the array using Validators.compose for a field. As for ’email’ we pass two validations i.e. Validators.compose([Validators.required,this.validateEmail], even three for password( remember how difficult it was to validate the password in past days), and so on. Angular 2 give built in validations as:-
1. required
2. minLength
3. maxLength
4. Patern

Now if you need more you can make custom validation and pass it to the Validators.compose as i did to validate the email against regex with validateEmail function:-
in the field we passed function as:-

function that I defined:-

Now head to the http://localhost:4200 and see the form working.
Take a look at the [disabled] attribute of the submit button. Button will not be enabled until the form become valid. How easy is to stop user to submit the form on invalid form values. So many properties given by angular makes our work easy. Notice the touched property as example in case of email as:-

it will not asking for the email until the user not touched or visit the input for the very first time.

Wrapping Up

Today we learn about different types of forms in Angular 2, there benefits, and how to work with them. Validation is the very tedious task in case of user inputs and form handling. Angular makes it easy for us by providing lots of helpers out of the box.If you want to build yourself then follow the tutorial step by step or you can download it from .

One thought on “Angular 2 Forms and Validations

Leave a Reply

Your email address will not be published. Required fields are marked *