How to avoid repeat of data when entered using angular2 or typescript

Question

I have a div with contents and have an add button, if i click on add button, the same contents div is displayed/added.. If i click on add button multiple times, those many times the div i repeated. Till this it is working fine, but when i enter data to any one div, same data is reflecting on the addition div. Can anyone help me to solve this issue. I need data to be on the div where i type and rest div must stay empty.

HTML:

<md-card *ngFor="let position of products; let row_ind = index ">
 <div>
  <md-input-container>
     <input mdInput type="text" name="position.workName [(ngModel)]="workDetails.workName"> </md-input-container>
  <md-input-container> <input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workPlace" > </md-input-container>
</div>
 <div >
  <md-input-container><input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workUnit"> </md-input-container>
  <md-input-container> <input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workCountry" > </md-input-container> </md-card>

ts:

this.products = [{
      "workName": "",
      "workPlace":"",
      "workUnit":"",
      "workCountry":""
    }];

open(){
    var item = {
      "workName": "",
      "workPlace":"",
      "workUnit":"",
      "workCountry":"",
    }    
    this.products.push(item);
  }

public products:Array<any>;

export class Work {
  public workName:string;
  public workPlace: string;
  public workUnit: string;
  public workCountry :string;
}

Public workDetails:workDetails = new Work();

Answer 1

I think to create an array of objects you will have to do something like this,

ts:

 this.products = [{"workName": "", "workPlace": "", "workUnit": "", "workCountry": ""}, {"workName": "", "workPlace": "", "workUnit": "", "workCountry": ""}, {"workName": "", "workPlace": "", "workUnit": "", "workCountry": ""}];

    openAddPosition(){
        var item = {
          "workName": "",
          "workPlace":"",
          "workUnit":"",
          "workCountry":"",
        }    
        this.products.push(item);
      }

    public products:Array<Work>;

export class Work {
  public workName:string;
  public workPlace: string;
  public workUnit: string;
  public workCountry :string;
}

public workDetails:Work = new Work();

html:

<button md-mini-fab class="md-fab md-mini add-task" mdTooltipPosition="below" mdTooltip="Add" aria-label="New Task" (click)="openAdd()" style="bottom: 70%; right: 2%;">
                        <md-icon style="color:white;">add</md-icon>
                        </button>
<md-card layout="column" class="border-top-3px col-lg-12 col-md-12 col-sm-12 col-xs-12 " *ngFor="let workDetails of products">
                        <div class="clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <h6 class="color-primary md-headline" style="font-size:18px;">Adding</h6>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="font-size:13px;">
                            <md-input-container>
                                <input mdInput type="text" [(ngModel)]="workDetails.workName" placeholder="Work Name" [ngModelOptions]="{standalone: true}" required />
                            </md-input-container>
                            <md-input-container>
                                <input mdInput type="text" [(ngModel)]="workDetails.workPlace" placeholder="Work Name" [ngModelOptions]="{standalone: true}" required />
                            </md-input-container>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="font-size: 13px;
                    text-align: left;">
                            <md-input-container>
                                <input mdInput type="text" [(ngModel)]="workDetails.workUnit" placeholder="Work Name" [ngModelOptions]="{standalone: true}" required />
                            </md-input-container>
                            <md-input-container>
                                <input mdInput type="text" [(ngModel)]="workDetails.workCountry" placeholder="Work Name" [ngModelOptions]="{standalone: true}" required />
                            </md-input-container>
                    </md-card>

Note:

1. TS: I have created an array of work

2. HTML: Added a for loop and removed the name attribute.