How to prevent the row element from getting changed due to two-way binding in Angular

In Angular, i created a sample CustomerApp that gets CustomerName,Code,Amt from a html ui and adds it as a row in a html table. There is an option to select a particular row and when selected, that particular contents are displayed in the input box in the HTML UI.

When i modify the contents, that are displayed by selecting row, the content in the respective row also gets modified. Im unable to understand the reason behind it.

Any suggestions to help me understand the reason for such behaviour and steps to changed it is much appreciated.

I paste my code below:

Component

import { Component, Injector } from '@angular/core';
import { CustomerModel } from './CustomerApp.CustomerModel';
import { BaseLogger } from '../Utilities/logging.component';

@Component({
templateUrl: './CustomerApp.CustomerView.html',
styleUrl: '../app.component.css'
})
export class CustomerComponent {
title1 = 'FirstApplication';
_logObj: BaseLogger;
_inject: Injector;
constructor(loggerObj: BaseLogger, inject: Injector) {
this._inject = inject;
this._logObj = inject.get("1");
this._logObj.Log();
}
Customer: CustomerModel = new CustomerModel();
Customers: Array<CustomerModel> = new Array<CustomerModel>();
Add() {
this.Customers.push(this.Customer);
this.Customer = new CustomerModel();
}

SelectedRow(_customer: CustomerModel) {
this.Customer = _customer;
}
}


Html

<div>
<form [formGroup]="Customer.formCustomergroup">
<table align="left-side" style="background-color:rgb(120, 148, 220);">
<tr><td><b>Customer Code:</b></td><input formControlName="CustomerCodeControl" [(ngModel)]="Customer.CustomerCode" type="text"/><br><td></td></tr>
<tr><td><b>Customer Name:</b></td><td><input formControlName="CustomerNameControl" (ngModel)="Customer.CustomerName" type="text"/><br></td></tr>
<tr><td><b>Customer Number:</b></td><td><input [(ngModel)]="Customer.CustomerAmount" type="text" [ngModelOptions]="{standalone: true}"><br></td></tr>
<tr><td><input [disabled]="!(Customer.formCustomergroup.valid)" type="button" (click)="Add()" value="Add"></td></tr>

</table>
<div *ngIf="Customer.formCustomergroup.dirty" [hidden]="!hasErrors('required','CustomerNameControl')">Customer Name required</div>
<div *ngIf="Customer.formCustomergroup.dirty" [hidden]="!hasErrors('pattern','CustomerCodeControl')">Customer Code Invalid</div>
<div *ngIf="Customer.formCustomergroup.dirty" [hidden]="!hasErrors('required','CustomerCodeControl')">Customer code required</div>
</form>
<grid-ui

[grid-columns]="[{'colName':'CustomerCode'},{'colName':'CustomerName'},{'colName':'CustomerAmount'}]"
[grid-data]="Customers" (grid-selected)="SelectedRow($event)">

</grid-ui>

Continue reading...