Template Driven Forms In Angular

Article

In our previous article, we learned how to create services and use them in multiple components. Now, we are going to talk about forms. Forms are really important to get the data from the users.

Let's say a user wants to sign in to our website. He/she must need to enter the username and password and then, we need to validate those credentials before the user enters the website. And we want to validate and show the errors if there is any wrong information while the user logs in. So, we must be able to access the data that user can enter in an input form.

In this article, we are going to see how we can fetch the data of the form and how we can validate the data and how we can handle different kinds of errors on that form.

Let's open app.component.ts and app.component.html which are both empty.

Now, I have prewritten CSS which you can write as it is; otherwise, you can write on your own also.

Code

*{
box - sizing: border - box;
}.container {
display: block;
background: #f4f4f4;
max - width: 650 px;
margin - top: 20 px;
margin - left: auto;
margin - right: auto;
padding: 10 px 40 px;
text - align: center;
position: relative;
font - family: sans - serif;
font - size: 15 px;
}
p {
font - size: 40 px;
font - weight: 200;
line - height: 100 % ;
font - weight: 700;
color: #555459;
margin-top: 20px;
margin-left: 0px;
margin-bottom: 20px;
}
input, select{
width:100%;
display: inline-block;
padding:15px;
font-weight: 100;
font-size: 20px;
margin:5px 0;
color:# 3 f3f3f;
}

I will go back to app.component.html and design the form with the below HTML code.

Code

<form class="container"> <input type="text" name="firstname" placeholder="FirstName"><br> <input type="text" name="lastname" placeholder="LastName"> <br> <select name="programming">
<option value="C#">C#</option>
<option value="VB.net">VB.net#</option>
<option value="Anugular">Angular#</option>
</select> <br><br><br> <input type="submit" value="submit"> </form>

Output

Now, we are done with our UI and our CSS is applied to these text boxes and dropdown list.

In order to fetch the data that is going to be written within input textboxes and an option from this dropdown list, we just need to get the data within our export class appComponent in app.component.ts. In Angular, there are two ways to fetch the data from the form as below.

Template driven form
Model-driven form

In this article, let's see how we can fetch the data from a form using Template-driven approach.

So, let's go back to HTML, template driven form data means that most of the work we will be doing within HTML template to fetch the data of the form. And Model-driven form means that most of the work we will be doing within the app.component.ts to fetch the data of the form.

In Angular 4, we need to define a form to fetch the data of all the text boxes. It automatically detucts the form element and after that with in the form element it detucts that which of the elements contains directive and that directive is called ng Model.

Any input element whether its a select or input elements, its going to check where are the ng Model written. ng Model is written just within the input text as shown below,

<input type="text" name="firstname" placeholder="FirstName" ng-model><br>

Copy and paste to other controls for select control, as shown below,

<input type="text" name="firstname" placeholder="FirstName" ng-model><br> <input type="text" name="lastname" placeholder="LastName" ng-model> <br> <select name="programming" ng-model>
<option value="C#">C#</option>
<option value="VB.net">VB.net#</option>
<option value="Anugular">Angular#</option>
</select>

In Angular 4 you must know what form should be used to send the different elements.

Let us write below code first as below,

(ngSubmit)="onSubmit()"

Function(onSubmit) will be inside the app.component.ts, whenever the form is submitting then which function will be called and that function will receive all the values that will return within the input elements.

And along with ngSubmit directive we need to define another directive and that is called ng form, this is built in Angular 4.

Code

<form class="container"#userForm= "ngForm"(ngsubmit)="onSubmit(userForm.value)">

We wrote userForm.value, this will send out the objects of all the values that are going to be written in all the input elements and select element as well.Every element has ngModel directive.

Now write onSubmit function within the app.component.ts as below,

onsubmit=function(user)
{
console.log(user);
}

We wrote console.log to check if we are getting values or not and also to make sure that in your app.module.ts file you have imported formsmodule library. Because without it we can't work with form validations.

Now refresh the browser and type in FirstName, LastName and select any language as shown below,