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

Posted 2023-02-22

【中文标题】FormArray嵌套在另一个FormArray中时如何获取FormArrayName？

【英文标题】：How to get FormArrayName when the FormArray is nested in another FormArray?

【发布时间】：2017-11-09 18:00:41

【问题描述】：

参考：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"> 使用吸气剂 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>

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

【问题讨论】：

我找到了一种解决方法：我不使用 FormNameArray 也不是姐妹城市的吸气剂，而是使用 *ngFor="let sisterCity of city.controls.sisterCities.controls 代替我的嵌套 ngFor，但它对我来说确实有点难看......

另一个很好的解决方案***.com/a/48527939/9583544。像魅力一样工作

【参考方案1】：

我也在为同样的问题而苦苦挣扎。最后解决了。 首先，我们查看主表单数组“城市”结构。

图像上黄色突出显示的控件是第一个数组控件路径。 => 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

【讨论】：

谢谢。我找到了相同的解决方法（正如我在评论中解释的那样）。顺便说一句，我认为您在cities.controls[i]sisterCities.controls ==> cities.controls[i].sisterCities.controls

中遗漏了一个点

是的，我忘了点。我希望对这个方法的任何人有所帮助。

我收到一个错误“‘AbstractControl’类型上不存在属性‘sisterCities’。”但这种方式有效：*ngFor="let sisterCity of cities.get('sisterCities').controls; let i=index"

@Experimenter 这个答案写于 2017 年。Angular 不断发展。 get 函数让你得到 AbstractControl，我猜我们想要什么。

【参考方案2】：

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

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

【讨论】：

我正在使用动态formControlName，它的工作原理就像一个魅力