FormArray嵌套在另一个FormArray中时，如何获取FormArrayName？

Question

参考：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!

DOM <div formArrayName="cities"> 使用 getter get cities(): FormArray { return this.form.get('cities') as FormArray; } 一切都很顺利

但是

当一个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>

请帮我实现这个目标。提前谢谢你。

Answer 1

我也在为同样的问题苦苦挣扎。并最终解决了它。首先我们查看主窗体数组 'cities' 结构。

图中黄色高亮的控件是第一个数组控件路径。 => cities 绿色突出显示的控件是第二个数组控件。 => sisterCities

    <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 cities.controls[i]sisterCities.controls; index as j">
           ...
         </div>
       </div>
    </div>
  </div>
  <button>Submit</button>
</form>

访问第二个嵌套 FormArray 的正确方法是在插入当前城市索引后访问第一个控件数组。并分别sisterCities,control.

let sisterCity of cities.controls[i].sisterCities.controls

Answer 2

它对我来说就像嵌套表单组一样有魅力.. 你需要：

使用 [formGroupName]="i"
formControlName 不能是动态的..相反，它应该具有您初始化 from 组时的名称，并且有无数示例。
您需要在您使用 formArrayName 属性的同一 div 中迭代表单数组控件。

FormArray嵌套在另一个FormArray中时，如何获取FormArrayName？

How to get FormArrayName when the FormArray is nested in another FormArray?

forms

arrays

getter

nested

angular

但是