单击按钮时如何防止清除表单输入字段

Question

我有一个简单的表格，如果用户使用不同的名字，则允许他们输入多个名字和姓氏。最初，该表格仅加载一个用于姓氏和名字的条目。要为其名称添加更多输入字段，他们单击一个调用此功能的按钮：

TS代码

 addName(){
   this.person.fullName.push({ firstName : "", lastName : ""});
 }

这将按预期添加输入字段，但也会清除先前字段中的用户输入。动态添加更多输入字段时，如何防止清除用户输入？

HTML代码

按钮

<button type="button" class="btn btn-warning btn-block" id="addName" (click)="addName()">More Names</button>

更多HTML

<div class="card-body"  *ngFor="let index of 
   person['fullName']'; trackBy : trackByName'">
             <div class="row">
                <div class="col-sm-6">
                   <div class="form-group">
                      <input type="text" class="form-control" id="person.id" placeholder="Given name"
                      required
                      [(ngModel)]="index.firstName" name="firstName"
                      #firstName="ngModel">