title: why Angular 2 reset form is also rest array of object
body: <p>I build a simple angular app.I have a class and a from in html template matching with my object of class here is my component.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { Customer, PeopleDependent } from '../Model/customer';
  import { FormsModule, NgForm  } from '@angular/forms';
  
  
  @Component({    selector: 'peopleFrom',    templateUrl: 'app/Components/PeopleFrom.component.html'})
  export class PeopleFromComponent  {
  
  constructor() {
      this.dependent = new PeopleDependent();
  }
  
  private dependentArray: PeopleDependent[]=[];
  private dependent: PeopleDependent;  
  private onPeopleDependentSubmit(frm: NgForm) {
      debugger;
      if (frm.form.valid) {
          //first way is not working??
          this.dependentArray.push(this.dependent);
          frm.form.reset() 
  
          //second way is working
          let newDependetn: PeopleDependent = new PeopleDependent();
          newDependetn.FirstName = this.dependent.FirstName;
  
          this.dependentArray.push(newDependetn);
          frm.form.reset() 
      }
  }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here is my html template</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;legend&gt;People Dependent&lt;/legend&gt;
  &lt;div class="form-horizontal" (ngSubmit)="onPeopleDependentSubmit(PeopleDependentForm)" #PeopleDependentForm="ngForm" ngForm  autocomplete="off" novalidate &gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group rqd"&gt;
                  &lt;label class="control-label col-md-3" for="PeopleDependent_FirstName"&gt;FirstName &lt;/label&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;input class="form-control " id="PeopleDependent_FirstName" name="PeopleDependent.FirstName" #PeopleDependentFirstName="ngModel" [(ngModel)]="dependent.FirstName" type="text" value="" required&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group rqd"&gt;
                  &lt;label class="control-label col-md-3" for="PeopleDependent_LastName"&gt;LastName&lt;/label&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;input class="form-control " id="PeopleDependent_LastName" name="PeopleDependent.LastName" #PeopleDependentLastName="ngModel" [(ngModel)]="dependent.LastName" type="text" value=""required &gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group  rqd"&gt;
                  &lt;label class="control-label col-md-3" for="PeopleDependent_BirthDate"&gt;BirthDate&lt;/label&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;dp-date-picker dir="rtl"
                                      id="PeopleDependent_BirthDate"
                                      name="PeopleDependent.BirthDate"
                                      [(ngModel)]="dependent.BirthDate"
                                      mode="day"
                                      placeholder="BirthDate"
                                      theme="dp-material"
                                      class="form-control"
                                      required
                                      #BirthDate="ngModel"&gt;
                      &lt;/dp-date-picker&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-3" for="PeopleDependent_Ratio"&gt;Ratio&lt;/label&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;input class="form-control " id="PeopleDependent_Ratio" name="PeopleDependent.Ratio" #PeopleDependentRatio="ngModel" [(ngModel)]="dependent.Ratio" type="text" value="" &gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-3" for="PeopleDependent_Income"&gt;Income&lt;/label&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;input class="form-control " id="PeopleDependent_Income" name="PeopleDependent.Income" #PeopleDependentIncome="ngModel" [(ngModel)]="dependent.Income" type="text" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group  "&gt;
                  &lt;label class="control-label col-md-3" for="PeopleDependent_Job"&gt;Job&lt;/label&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;input class="form-control " id="PeopleDependent_Job" name="PeopleDependent.Job" #PeopleDependentJob="ngModel" [(ngModel)]="dependent.Job" type="text" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="form-group  "&gt;
                  &lt;label class="control-label col-md-3" for="PeopleDependent_Education"&gt;Education&lt;/label&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;input class="form-control " id="PeopleDependent_Education" name="PeopleDependent.Education" #PeopleDependentEducation="ngModel" [(ngModel)]="dependent.Education" type="text" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="row"&gt;
                  &lt;button type="submit" class="btn btn-success" [disabled]="!PeopleDependentForm.form.valid" (click)="onPeopleDependentSubmit(PeopleDependentForm)"&gt;Create&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default" (click)="PeopleDependentForm.reset()"&gt;Reset&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;table class="table table-striped" id="ListItemTbl"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;row&lt;/th&gt;
                      &lt;th&gt;FirstName&lt;/th&gt;
                      &lt;th&gt;LasttName&lt;/th&gt;
                      &lt;th&gt;BirthDate &lt;/th&gt;
                      &lt;th&gt;Ratio&lt;/th&gt;
                      &lt;th&gt;Education&lt;/th&gt;
                      &lt;th&gt;Job&lt;/th&gt;
                      &lt;th&gt;Income&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor="let item of dependentArray;let i = index;"&gt;
                          &lt;td&gt;{{i+1}}&lt;/td&gt;
                          &lt;td&gt;{{item.FirstName}}&lt;/td&gt;
                          &lt;td&gt;{{item.LastName}}&lt;/td&gt;
                          &lt;td&gt;{{item.BirthDate}}&lt;/td&gt;
                          &lt;td&gt;{{item.Ratio}}&lt;/td&gt;
                          &lt;td&gt; {{item.Education}} &lt;/td&gt;
                          &lt;td&gt;{{item.Job}}&lt;/td&gt;
                          &lt;td&gt;{{item.Income}}&lt;/td&gt;
                      &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>when i push to array with this syntax and reset the form, then object of array is also clear and it depends on instance of Class;</p>
  
  <blockquote>
    <p>this.dependentArray.push(this.dependent);        frm.form.reset() </p>
  </blockquote>
  
  <p>Why this array has cleared?</p>