如何编辑和更新动态添加的输入值

问题描述

场景:

下面是我的json文件，名为contacts:

Below is my json file called contacts:

[
   {
     "name": "Ailis Wyld",
     "addresses": [
        {
            "addressType": "Business",
            "city": "Lansing",
            "postalCode": "48930"
        },
        {
            "addressType": "Home",
            "city": "Young America",
            "postalCode": "55573"
        }
     ]
  },
  {
    "name": "Aksel",
    "addresses": [
        {
            "addressType": "Business",
            "city": "Battle Creek",
            "postalCode": "49018"
        },
        {
            "addressType": "Home",
            "city": "Memphis",
            "postalCode": "38131"
        }
    ]
   },
   {
     "name": "Dearan",
     "addresses": [
        {
            "addressType": "Other",
            "city": "Minneapolis",
            "postalCode": "55417"
        },
        {
            "addressType": "Other",
            "city": "Sacramento",
            "postalCode": "95833"
        }
    ]
   }

]

我正在显示contacts的name和address(对于一位以前的特定联系人)，如下所示:

I am displaying the name and address of the contacts(For ex one particular contact) like this:

预期结果:

• 我正在显示许多addresses，如果我单击特定的address(对于ex addressType:主页)，我必须能够编辑address意味着我应该获取该地址值(即addressType，city，postalCode )，如下所示:

• I am displaying many addresses, If i click on particular address(For ex addressType: Home) i must able edit that address means i should get that address values(i,e addressType, city, postalCode) in the below input fields like this:

以便我可以编辑和更新该特定地址.

So that i can edit and update that particular address.

• 然后，我应该能够从该输入字段中添加一个新的地址.

下面是我的stackblitz 演示

Below is my stackblitz DEMO

推荐答案

尝试此在线示例

我更改了这些:

• 如果选择了地址，请使用更新模式；如果未选择，请添加模式
• 添加您的表单数据到特定索引的联系人数组
从编辑数据中
• 更新所选地址

• use Update mode if an address is selected or Add mode if it is not
• add your form data to contacts array for a particular index
• update the selected address from your edit data

  selectAddr(addr) {
    this.newAttribute.addressType = addr.addressType;
    this.newAttribute.postalCode = addr.postalCode;
    this.newAttribute.city = addr.city;

    this.selectedAddr = addr;
  }

  saveAddress(index, form: FormGroup) {
    const mode: 'update' | 'add' = this.selectedAddr ? 'update' : 'add';

    if (mode === 'add') {
      this.contacts[index].addresses.push({ ...this.newAttribute });
    } else if (mode === 'update') {
      Object.assign(this.selectedAddr, this.newAttribute);
    }

    // reset
    this.selectedAddr = undefined;
    form.reset();
  }

<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">
            <tr>
                <td>
                  <div id="field-type">
                      <mat-chip-list>
                        <mat-chip color="primary" (click)="selectAddr(addr)" selected>{{addr.addressType}}</mat-chip>
                      </mat-chip-list>
                  </div>
                </td>
                <td>
                    <div class="field-data">
                   {{addr.city}}-{{addr.postalCode}}
                </div>
                  </td>
                <td>
                    <div class="field-data">
                    <b>Delete</b>
                   </div>
                </td>
            </tr>
          </table>
        <hr>
        <br>
      </div>
  <br>
  <!--Address Section-->

  <mat-form-field>
    <mat-select formControlName="addressType" placeholder="Type" [(ngModel)]="newAttribute.addressType">
        <mat-option *ngFor="let addressType of addresstypes" [value]="addressType.value">
            {{addressType.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>
			
<br>
     
<mat-form-field >
    <input matInput formControlName="postalCode"  [(ngModel)]="newAttribute.postalCode"  placeholder="Postal Code" >
</mat-form-field>
<br>
<mat-form-field >
    <input matInput formControlName="city"  [(ngModel)]="newAttribute.city"  placeholder="City" >
</mat-form-field>
<br>

     <br><br><br><br>
        <button mat-flat-button    (click)="saveAddress(i,myForm)">Save</button>
</form> 
<br>
<hr>
</div>

这篇关于如何编辑和更新动态添加的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！