如何编辑和更新动态添加的输入值 [英] How to edit and update the dynamically added input values

问题描述

场景:

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

<预><代码>[{"name": "艾莉丝·怀尔德",地址":[{"addressType": "业务","city": "兰辛",邮政编码":48930"},{"addressType": "家庭","city": "年轻的美国",邮政编码":55573"}]},{"name": "阿克塞尔",地址":[{"addressType": "业务","city": "战溪",邮政编码":49018"},{"addressType": "家庭","city": "孟菲斯",邮政编码":38131"}]},{"name": "亲爱的",地址":[{"addressType": "其他","city": "明尼阿波利斯",邮政编码":55417"},{"addressType": "其他","city": "萨克拉门托",邮政编码":95833"}]}]

我正在显示 contacts(例如一个特定联系人)的 name 和 address，如下所示:

预期结果:

• 我正在显示许多 addresses，如果我点击特定的 address(对于 ex addressType:Home)，我必须能够编辑该 address 意味着我应该在下面的输入字段中获取地址值(即地址类型、城市、邮政编码)，如下所示:

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

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

下面是我的stackblitz 演示

解决方案

试试这个 在线示例

我改变了这些:

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

 selectAddr(addr) {this.newAttribute.addressType = addr.addressType;this.newAttribute.postalCode = addr.postalCode;this.newAttribute.city = addr.city;this.selectedAddr = addr;}保存地址(索引，表单:FormGroup){常量模式:'更新' |'添加' = this.selectedAddr ?'更新':'添加';如果(模式 === '添加'){this.contacts[index].addresses.push({ ...this.newAttribute });} else if (mode === '更新') {Object.assign(this.selectedAddr, this.newAttribute);}//重启this.selectedAddr = 未定义；表单.重置()；}

<form [formGroup]="addForm" #myForm><p>姓名:{{contact.name}}</p><br><!--地址部分--><div class="address-sec"><p id="addr">地址</p><br><table style="width:100%" *ngFor="let addr of contact.addresses"><tr><td><div id="字段类型"><mat-chip-list><mat-chip color="primary" (click)="selectAddr(addr)" selected>{{addr.addressType}}</mat-chip></mat-chip-list>
</td><td><div class="field-data">{{addr.city}}-{{addr.postalCode}}

</td><td><div class="field-data"><b>删除</b>

</td></tr><小时><br>

<br><!--地址部分--><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="邮政编码" ></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)">保存</button></表单><br><小时>

Scenario:

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"
        }
    ]
   }

]

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

Expected Result:

• 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.

• Then i should be able add a new address from that input fields.

Below is my stackblitz DEMO

解决方案

try this online example

I changed these:

• 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>

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