参考:https://angular.io/docs/ts/latest/api/forms/index/FormArrayName-directive.html https://angular.io/docs/ts/latest/api/forms/index/FormArrayName-directive.html,很容易获得 FormArrayName :
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="cities">
<div *ngFor="let city of cities.controls; index as i">
<input [formControlName]="i" placeholder="City">
</div>
</div>
<button>Submit</button>
</form>
form = new FormGroup({
cities: new FormArray([
new FormControl('SF'),
new FormControl('NY')
])
});
get cities(): FormArray { return this.form.get('cities') as FormArray; }
// This does the magic!
The DOM <div formArrayName="cities">
使用吸气剂get cities(): FormArray { return this.form.get('cities') as FormArray; }
一切都很顺利
BUT
当FormArray嵌套在另一个FormArray中时如何制作getter?
让我们说这个例子:
form = new FormGroup({
cities: new FormArray([
new FormGroup({
name: new FormControl('SF'),
sisterCities: new FormArray(['Shanghai','Zurich',...])
}),
new FormGroup({
name: new FormControl('NY'),
sisterCities: new FormArray(['London','Oslo',...])
}),
]),
});
get cities(): FormArray { return this.form.get('cities') as FormArray; }
// still get the main cities FormArray
// but
// get sisterCities() won't work because I need to target a city FormGroup (NY or SF) before accessing its sisterCities FormArray.
// and AFAIK, it is not possible to pass parameters to a getter.
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="cities">
<div *ngFor="let city of cities.controls; index as i" [formGroupName]="i">
<input [formControlName]="name" placeholder="City">
<div formArrayName="sisterCities"> <!-- this will never work -->
<div *ngFor="let sisterCity of sisteCities.controls; index as j">
...
</div>
</div>
</div>
</div>
<button>Submit</button>
</form>
请帮助我实现这一目标。
先感谢您。