编辑动态添加的值

时间:2019-01-17 04:37:52

标签: angular typescript angular6

在我的JSON文件中,我有一个名为variable的{​​{1}},其中包含多个对象(即多个地址)。我正在显示多个address,如下所示:

enter image description here

  • 如上图所示,单击特定的address(例如addressType:Business)后,我在下面的输入字段中得到了address值(即postalCode,City),如图片。现在address之后editing并点击编辑了address add 按钮时,正在保存,但应该像这样清除address:< / li>

enter image description here

这样我可以添加一个新地址,但是我无法在不刷新页面的情况下清除该输入字段

  • 点击删除,我必须能够删除该地址

DEMO

1 个答案:

答案 0 :(得分:1)

更新数据后,您需要reset表单。

saveAddress(index, form: FormGroup) {
    if (this.mode === 'add') {
      this.contacts[index].addresses.push({ ...this.newAttribute });
      form.reset();
    } else if (this.mode === 'update') {
      Object.assign(this.selectedAddr, this.newAttribute);
      form.reset();  // Form reset here
    }
  }

要删除-

deleteRecord(i, j){
    this.contacts[i].addresses.splice(j, 1);
  }

<div class="main" *ngFor="let contact of contacts;let i = index">

<form [formGroup]="addForm" #myForm>

  <p>Name: {{contact.name}}</p>
  <br>
<!--Address section-->
      <div  class="address-sec">
        <p id="addr">Addresses</p>
        <br>
        <table style="width:100%" *ngFor="let addr of contact.addresses; let j = index">
            <tr>
                ....
                <td>
                    <div class="field-data" (click)='deleteRecord(i,j)'>
                    <b>Delete</b>
                   </div>
                </td>
            </tr>
          </table>
        <hr>
        <br>
      </div>