Angular - Template Driven Form And ngModel

Forms are basically part of every application nowadays, it doesn't matter in which technology you are working on, at some point of time you will need to create forms.

Forms are basically part of every application nowadays. It doesn't matter which technology you are working on, at some point, you will need to create forms.

Forms are a container of your controls or we can say they are used for gathering the data from the user, the user provides values to the controls.

Angular also provides the same functionality for forms but in the case of Angular, we have 2 types of forms,

• Template driven form
• Reactive form

There are lots of differences between reactive and template driven form but the main is: Reactive forms are synchronous while Template-driven forms are asynchronous.

This blog is about how to use Template-Driven to create a simple user registration form.

So let us start with Template-Driven form.

• A template driven form allows you to use HTML controls and bind their property with a model using ngModel directive.
• ngModel is provided by Angular and its purpose is to bind model property with the control and can be used for achieving 2-way bindings. I will explain 2-way binding later.

Create a component and name it as User Registration. Once it gets created, copy the data from below and paste it in User Registration component HTML.

<form #form="ngForm" (ngSubmit)="register(form.value)">
<label>Firstname:</label>
<inputtype="text"name="firstname"ngModel="firstname">
<label>Lastname:</label>
<inputtype="text"name="lastname"ngModel>
<label>Street:</label>
<inputtype="text"name="street"ngModel= "street">
<label>Zip:</label>
<inputtype="text"name="zip"ngModel>
<label>City:</label>
<inputtype="text"name="city"ngModel>
<buttontype="submit">Submit</button>
</form>

1. Notice that we have used ngForm at the top. It is basically used to create instance of our form without writing any application code for form creation.
2. #form is name of the form , we can access value of controls in the form using form name.
3. ngSubmit is used to handle submit event which is fired when submit button get clicked.
4. form.value in register method basically retrieve all the values provided in the controls.
5. ngModel in the control is used to register control to the form , if control doesn't have ngModel then there value will not be render in form.value.So to pass values in the form control should have ngModel.

Now, write some code in UserRegistration.ts file to check whether the form has successfully posted the value at runtime or not. In your .ts file, copy the below code and paste it.

register(form: any): void {
   console.log(form);
}

In your app.module.ts, import NgModule from Angular/core. 

import { NgModule } from'@angular/core';

Now, run your application using ng serve, provide values in the User Registration form and clicks on submit button. You will get your values in register event.

SYNTAX 
Ng-Model Using Expressions

We can also write ngModel using the expression.

HTML File

<input type="text" name="firstname" [ngModel]="firstname">

This is another way to use ngModel with expression. It will work the same way the above example works.

SYNTAX - Two Way Binding using Ng-Model

HTML

<input type="text"name="street" [(ngModel)]= "street">

.TS File

constructor() {
   this.street="Dummy street";
}

Now, run your application again. As soon as the application is loaded, the street value will be there on the page. If you change this value and submit again, the value will get changed in the form.value.

 

Hope this article will help people who just started using Angular and are facing some challenges in developing forms.