【发布时间】：2018-07-04 07:19:07
【问题描述】：
我是 Angular 2 的新手，并决定最好的学习方式是阅读 Angular 官方指南。
我浏览了响应式表单指南 https://angular.io/guide/reactive-forms
演示链接：https://stackblitz.com/angular/jammvmbrpxle
虽然内容总体上相当不错，但我仍然坚持如何实现更复杂的表单。在给定的示例中，每个英雄都有可能拥有许多地址。地址本身就是一个平面对象。
如果地址有附加信息，例如地址所在房间的颜色和类型。
export class Address {
street = '';
city = '';
state = '';
zip = '';
rooms = Room[];
}
export class Room {
type = '';
}
让表单模型看起来像这样......
createForm() {
this.heroForm = this.fb.group({
name: '',
secretLairs: this.fb.array([
this.fb.group({
street: '',
city: '',
state: '',
zip: '',
rooms: this.fb.array([
this.fb.group({
type: ''
})]),
})]),
power: '',
sidekick: ''
});
}
编辑 - 与 ngOnChanges 一起使用的最终代码
hero-detail.component.ts
createForm() {
this.heroForm = this.fb.group({
name: '',
secretLairs: this.fb.array([
this.fb.group({
street: '',
city: '',
state: '',
zip: '',
rooms: this.fb.array([
this.fb.group({
type: ''
})
])
})
]),
power: '',
sidekick: ''
});
}
ngOnChanges() {
this.heroForm.reset({
name: this.hero.name,
});
this.setAddresses(this.hero.addresses);
}
setAddresses(addresses: Address[]) {
let control = this.fb.array([]);
addresses.forEach(x => {
control.push(this.fb.group({
street: x.street,
city: x.city,
state: x.state,
zip: x.zip,
rooms: this.setRooms(x) }))
})
this.heroForm.setControl('secretLairs', control);
}
setRooms(x) {
let arr = new FormArray([])
x.rooms.forEach(y => {
arr.push(this.fb.group({
type: y.type
}))
})
return arr;
}
hero-detail.component.html（嵌套表单数组部分）
<div formArrayName="secretLairs" class="well well-lg">
<div *ngFor="let address of heroForm.get('secretLairs').controls; let i=index" [formGroupName]="i" >
<!-- The repeated address template -->
<h4>Address #{{i + 1}}</h4>
<div style="margin-left: 1em;">
<div class="form-group">
<label class="center-block">Street:
<input class="form-control" formControlName="street">
</label>
</div>
<div class="form-group">
<label class="center-block">City:
<input class="form-control" formControlName="city">
</label>
</div>
<div class="form-group">
<label class="center-block">State:
<select class="form-control" formControlName="state">
<option *ngFor="let state of states" [value]="state">{{state}}</option>
</select>
</label>
</div>
<div class="form-group">
<label class="center-block">Zip Code:
<input class="form-control" formControlName="zip">
</label>
</div>
</div>
<br>
<!-- End of the repeated address template -->
<div formArrayName="rooms" class="well well-lg">
<div *ngFor="let room of address.get('rooms').controls; let j=index" [formGroupName]="j" >
<h4>Room #{{j + 1}}</h4>
<div class="form-group">
<label class="center-block">Type:
<input class="form-control" formControlName="type">
</label>
</div>
</div>
</div>
</div>
<button (click)="addLair()" type="button">Add a Secret Lair</button>
</div>
【问题讨论】：