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

问题描述

引用: https://angular. io/docs/ts/latest/api/forms/index/FormArrayName-directive.html ，很容易获得FormArrayName:

Refering to : https://angular.io/docs/ts/latest/api/forms/index/FormArrayName-directive.html, it is easy to get a FormArrayName :

HTML:

<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>

TS:

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; }一切都像魅力一样

The DOM <div formArrayName="cities"> uses the getter get cities(): FormArray { return this.form.get('cities') as FormArray; }and everything is working like a charm

当FormArray嵌套在另一个FormArray中时，如何进行吸气剂?

How to make the getter when the FormArray is nested in another FormArray ?

让我们说这个例子:

TS:

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.

HTML:

<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>

请帮我实现这一目标.预先谢谢你.

Please, help me to achieve this.Thank you in advance.

推荐答案

我也遇到了同样的问题.最后解决了.首先，我们着眼于主要形式的阵列城市"结构.

I struggling same problem. And finaly solved it.Firstly we looking to main form array 'cities' structure.

图像上的黄色高亮控件是第一个数组控件路径. => cities绿色高亮控件是第二个数组控件. => sisterCities

Which is the yellow highlited controls at image is first array control path. => citiesAnd green highlited control is second array control. => 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.

Proper way to access this second nested FormArray is accessing first control array after insert current cities index. And respectively sisterCities,control.

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

这篇关于当FormArray嵌套在另一个FormArray中时，如何获取FormArrayName?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！