Data Binding To A Model In Angular

Introduction

When we have the UI form ready in Angular, then we need to send the data to the server for further operations. Simply, we can send it to save the details. But before we send the data to the server, we have to first bind the data to the model. Let us see how.

Before we start with data binding to the model, we must have a form created. Click here to see how we can create a form with data binding using a template-driven approach applied to it.

Create a new class.

>ng generate class Address
>ng generate class Student

Open address.ts and add the below code.

export class Address {
constructor(
public street: string,
public city: string,
public state: string
){}
}

Open student.ts and add the below content.

import { Address } from "./address";
export class Student {
constructor(
public name: string,
public email: string,
public phone: number,
public gender: string,
public course: string,
public sendUpdates: boolean,
public bloodGroup: string,
public address: Address
){}
}

We are using TypeScript shorthand syntax for defining the constructor. The compiler of TypeScript generates a public key for each public parameter and assigns the value to the field when you create the instance. It is similar to the services that we inject to the constructor.

We have created the model. Now, we have to create an instance.

Open app.component.ts and add the below code.

import { Component, OnInit } from '@angular/core';
import { Student } from './student';
import { Address } from './address';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
groups=['A+', 'A-', 'B+', 'B-', 'O+', 'O-'];
addressModel = new Address("Lukerganj", "Allahabad", "UP");
studentModel = new Student("Mohammad Irshad", "[email protected]", 7878787878, "male", "MCA", true, "A+", this.addressModel)
SubmitDetails(studentData){
console.log(studentData);
}
constructor() { }
ngOnInit() {
}
}

We will try to bind the studentModel data to our created form. We will bind this value to the form and update through the UI form.

Let us first try to bind this value to the student form.

How will the value of the model be bound to the form?

We are simply binding the properties of the model to the ngModel directive. For property binding, we will use square brackets []. For binding, replace ngModel to [ngModel].

Eg: for property ‘name’ binding

[ngModel]=”studentModel.name”

We have a studentModel having ‘name’ property that we are binding to the ‘name’ input element.

The above [ngModel] used will only bind the data one way because property data binding is one-way binding. It will only bind the data from the class to the View but not from View to the class model.

When we want the two-way binding, then we have to use the below binding technique.

Change the [ngModel] to the [(ngModel)] to make it a two-way bind.

Open app.component.html and add the below code.

<div class="container-fluid">
<h3>
Student Registration!
</h3>
<p>Enter the below fields for student details.</p>
<form #studentForm="ngForm" (ngSubmit)="SubmitDetails(studentForm.value)">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" [(ngModel)]="studentModel.name" name="name">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="email">Email address:</label>
<input type="text" class="form-control" [(ngModel)]="studentModel.email" name="email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="text" class="form-control" [(ngModel)]="studentModel.phone" name="phone">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="gender">gender:</label>
<input type="text" class="form-control" [(ngModel)]="studentModel.gender" name="gender">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="bloodGroup">Blood Group:</label>
<select class="form-control" [(ngModel)]="studentModel.bloodGroup" name="bloodGroup">
<option selected="">A+</option>
<option *ngFor="let group of groups">{{group}}</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Course </label><br>
<input type="radio" [(ngModel)]="studentModel.course" name="course" value="BCA">BCA
<input type="radio" [(ngModel)]="studentModel.course" name="course" value="B.Tech">B.Tech
<input type="radio" [(ngModel)]="studentModel.course" name="course" value="BE">BE
<input type="radio" [(ngModel)]="studentModel.course" name="course" value="B.Sc">B.Sc
</div>
</div>
</div>
<div class="row" ngModelGroup="address">
<div class="col-sm-4">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control" name="street" [(ngModel)]="studentModel.address.street">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control" name="city" [(ngModel)]="studentModel.address.city">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>State</label>
<input type="text" class="form-control" name="state" [(ngModel)]="studentModel.address.state">
</div>
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" [(ngModel)]="studentModel.sendUpdates" name="sendUpdates"> send me updates</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<br>
<h5>StudentForm value:</h5>
{{studentForm.value | json}}
<h5>StudentModel value:</h5>
{{studentModel | json}}

In the above code, we are showing you the value of form: via {{studentForm.value | json}} and the value of studentModel via {{studentModel | json}}

Run the application.

You can see the details filled via studentModel.

Right now the value of studentForm and studentModel are same.

Let us change the values in the form.

You can see the changes reflect in both ways in form as well as in model.

This is how you can achieve the two-way binding from UI to model and model to UI through its binding.

Now, change all the [(ngModel)] to [ngModel] in file app.component.html property binding and see what happens.

Run the application.

You will see the first behavior will be the same as the model value will be bind as it is to the UI form.

Now, make any update in the UI form input.

You can see that the values of form are updated but the value of the model is not updated because this time we have used property binding, which is one-way binding, and UI to model updation does not happen.

So, with the help of two-way binding, we can capture the data of the form to the model and send to server and also, we can perform important validations and visual checks and error message display to the form before sending it to the server.