なぜ角度2リセットフォームもオブジェクトの残りの配列です

Question

私は単純な角型のアプリケーションを構築します。私はここにクラスのオブジェクトと一致するHTMLテンプレートのクラスとを持っています。

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() 
 
    } 
 
} 
 
}

、ここでは私のHTMLテンプレートです

<legend>People Dependent</legend> 
 
<div class="form-horizontal" (ngSubmit)="onPeopleDependentSubmit(PeopleDependentForm)" #PeopleDependentForm="ngForm" ngForm autocomplete="off" novalidate > 
 
    <div class="col-md-12"> 
 
     <div class="col-md-6"> 
 
      <div class="form-group rqd"> 
 
       <label class="control-label col-md-3" for="PeopleDependent_FirstName">FirstName </label> 
 
       <div class="col-sm-9"> 
 
        <input class="form-control " id="PeopleDependent_FirstName" name="PeopleDependent.FirstName" #PeopleDependentFirstName="ngModel" [(ngModel)]="dependent.FirstName" type="text" value="" required> 
 
       </div> 
 
      </div> 
 
      <div class="form-group rqd"> 
 
       <label class="control-label col-md-3" for="PeopleDependent_LastName">LastName</label> 
 
       <div class="col-sm-9"> 
 
        <input class="form-control " id="PeopleDependent_LastName" name="PeopleDependent.LastName" #PeopleDependentLastName="ngModel" [(ngModel)]="dependent.LastName" type="text" value=""required > 
 
       </div> 
 
      </div> 
 
      <div class="form-group rqd"> 
 
       <label class="control-label col-md-3" for="PeopleDependent_BirthDate">BirthDate</label> 
 
       <div class="col-sm-9"> 
 
        <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"> 
 
        </dp-date-picker> 
 
       </div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label class="control-label col-md-3" for="PeopleDependent_Ratio">Ratio</label> 
 
       <div class="col-sm-9"> 
 
        <input class="form-control " id="PeopleDependent_Ratio" name="PeopleDependent.Ratio" #PeopleDependentRatio="ngModel" [(ngModel)]="dependent.Ratio" type="text" value="" > 
 
       </div> 
 

 
      </div> 
 

 
     </div> 
 

 
     <div class="col-md-6"> 
 
      <div class="form-group"> 
 
       <label class="control-label col-md-3" for="PeopleDependent_Income">Income</label> 
 
       <div class="col-sm-9"> 
 
        <input class="form-control " id="PeopleDependent_Income" name="PeopleDependent.Income" #PeopleDependentIncome="ngModel" [(ngModel)]="dependent.Income" type="text" value=""> 
 
       </div> 
 
      </div> 
 
      <div class="form-group "> 
 
       <label class="control-label col-md-3" for="PeopleDependent_Job">Job</label> 
 
       <div class="col-sm-9"> 
 
        <input class="form-control " id="PeopleDependent_Job" name="PeopleDependent.Job" #PeopleDependentJob="ngModel" [(ngModel)]="dependent.Job" type="text" value=""> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="form-group "> 
 
       <label class="control-label col-md-3" for="PeopleDependent_Education">Education</label> 
 
       <div class="col-sm-9"> 
 
        <input class="form-control " id="PeopleDependent_Education" name="PeopleDependent.Education" #PeopleDependentEducation="ngModel" [(ngModel)]="dependent.Education" type="text" value=""> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <div class="row"> 
 
       <button type="submit" class="btn btn-success" [disabled]="!PeopleDependentForm.form.valid" (click)="onPeopleDependentSubmit(PeopleDependentForm)">Create</button> 
 
       <button type="button" class="btn btn-default" (click)="PeopleDependentForm.reset()">Reset</button> 
 
      </div> 
 
     </div> 
 

 
     <table class="table table-striped" id="ListItemTbl"> 
 
      <thead> 
 
       <tr> 
 
        <th>row</th> 
 
        <th>FirstName</th> 
 
        <th>LasttName</th> 
 
        <th>BirthDate </th> 
 
        <th>Ratio</th> 
 
        <th>Education</th> 
 
        <th>Job</th> 
 
        <th>Income</th> 
 
        <th></th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr *ngFor="let item of dependentArray;let i = index;"> 
 
         <td>{{i+1}}</td> 
 
         <td>{{item.FirstName}}</td> 
 
         <td>{{item.LastName}}</td> 
 
         <td>{{item.BirthDate}}</td> 
 
         <td>{{item.Ratio}}</td> 
 
         <td> {{item.Education}} </td> 
 
         <td>{{item.Job}}</td> 
 
         <td>{{item.Income}}</td> 
 
        </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

私はこの構文を使用して配列にプッシュし、フォームをリセットする場合、その配列の目的でありますまた、クラスのインスタンスに依存します。

this.dependentArray.push（this.dependent）; frm.form.reset（）

この配列がクリアされたのはなぜですか？

Answer 1

これは、フォームがthis.dependentにバインドされているという事実から来ていると思います。

ここでは参考になるかもしれません。フォームのthis.dependentを参照すると、form.resetに電話すると、実際にはthis.dependentをクリアします。 これは、使用しているPeopleDependentインスタンスがフォームとあなたの配列の間で共有されていることを意味します。実際には同じオブジェクトです。

解決方法の1つは、クリアする前にフォームの値をコピーすることです。 次の解決策を試すことができます：

const dependantCopy = Object.assign(new PeopleDependent(), this.dependant); // copying current dependant into new PeopleDependent. 
this.dependentArray.push(dependantCopy); 
frm.form.reset()