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>

当我使用这种语法推送到数组并重置表单时，数组的对象也很清楚，它取决于Class的实例;

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

为什么这个阵列已被清除？

Answer 1

我认为这是因为您的表单已绑定到this.dependent。

您可能在此处有参考问题。考虑到您的表单引用this.dependent，那么当您致电form.reset时，您实际上已清除this.dependent。这意味着您使用的PeopleDependent实例在表单和数组之间共享。它实际上是同一个对象。

一种解决方案可能是在清除前复制表单值。您可以尝试以下解决方案：

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

为什么Angular 2重置表单也是rest数组的对象

1 个答案: