![addressType]( "addressType")
本文介绍了如何编辑和更新动态添加的输入值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
场景:
下面是我的 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>
这篇关于如何编辑和更新动态添加的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！