は動的に私は以下のコンポーネントクラスのコードを持っているangular2

Question

に別のフォームの配列であるフォームの配列に追加します（）メソッドが機能しません。 sortItemの正しい反復のフォームコントロールにアクセスし、その反復に複数の場所アイテムを追加するにはどうすればよいですか？

これは私のマークアップです：

<div class=""> 
    <a (click)="addSort()" style="cursor: default"> 
    Add Sort Locations + 
    </a> 
</div> 

<div formArrayName="sortItem"> 
    <div *ngFor="let sortLocation of form.controls.sortItem.controls; let i=index"> 
     <!-- address header, show remove button when more than one address available --> 
     <div> 
      <span>Location {{i + 1}}</span> 
      <span *ngIf="form.controls.sortItem.controls.length > 1" 
       (click)="removeAddress(i)"> 
      </span> 
     </div> 

     <div [formGroupName]="i"> 
      <!--name--> 
      <div> 
       <label>Location Name</label> 
       <input type="text" formControlName="locationName"> 
       <!--display error message if street is not valid--> 
       <small [hidden]="form.controls.sortItem.controls[i].controls.locationName.valid"> 
        Street is required 
       </small> 
      </div> 

      <div formArrayName="locationItems"> 
      <div *ngFor="let eachItem of form.controls.sortItem.controls[i].controls.locationItems.controls; let t=index"> 
       <!-- address header, show remove button when more than one address available --> 
       <div class=""> 
        <a (click)="addSortLocationItem(i,t)" style="cursor: default"> 
        Add Items + 
        </a> 
       </div> 

       <div> 
        <span>Location Item {{t + 1}}</span> 
        <span *ngIf="form.controls.sortItem.controls[i].controls.locationItems.controls[t].length > 1" 
         (click)="removeAddress(t)"> 
        </span> 
       </div> 

       <div [formGroupName]="t"> 
        <!--name----> 
        <div> 
         <label>Item Name</label> 
         <input type="text" formControlName="itemName"> 
         <!--display error message if street is not valid--> 
         <small [hidden]="form.controls.sortItem.controls[i].controls.locationItems.controls[t].controls.itemName.valid"> 
          Name is required 
         </small> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

これですべてのヘルプは大歓迎されます。

Answer 1

iの場合はメインcontrolのindexあるので、あなたは簡単に次のように取得することができます。アドバイスとして、私はするために、いくつかの変数を作成することをお勧めしたい、

addSortLocationItem(i: number, t: number) { 
    const control = this.sortItem.get(`${i}.locationItems`) as FormArray; 
    control.push(this.initSortItems()); 
} 

そして、 codeの可読性を向上させます。

form: FormGroup; 
name: FormControl; 
sortItem: FormArray; 

この：PS

import { Component, OnInit } from '@angular/core'; 
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' 

@Component({ 
    ... 
}) 
export class BlaBlaComponent implements OnInit { 

    form: FormGroup; 
    name: FormControl; 
    sortItem: FormArray; 

    constructor(private readonly formBuilder: FormBuilder) { } 

    ngOnInit(): void { 
    this.name = this.formBuilder.control('', [Validators.required]); 
    this.sortItem = this.formBuilder.array([this.initSort()]); 

    this.form = this.formBuilder.group({ 
     name: this.name, 
     sortItem: this.sortItem 
    }); 
    } 

    initSort() { 
    return this.formBuilder.group({ 
     locationName: ['', [Validators.required]], 
     locationItems: this.formBuilder.array([ 
     this.initSortItems() 
     ]) 
    }) 
    } 

    initSortItems() { 
    return this.formBuilder.group({ 
     itemName: ['', [Validators.required]], 
     itemPicture: ['', []], 
    }) 
    } 

    addSort() { 
    this.sortItem.push(this.initSort()); 
    } 

    addSortLocationItem(i: number, t: number) { 
    const control = this.sortItem.get(`${i}.locationItems`) as FormArray; 
    control.push(this.initSortItems()); 
    } 
} 

：

<div *ngFor="let sortLocation of sortItem.controls; let i = index"> 
... 
<div *ngFor="let eachItem of sortLocation.get('locationItems').controls; let t = index"> 

完全なコードを：

<div *ngFor="let sortLocation of form.controls.sortItem.controls; let i=index"> 
... 
<div *ngFor="let eachItem of form.controls.sortItem.controls[i].controls.locationItems.controls; let t=index"> 

を置き換えることができ、私は聞かせて、テストしていません私が忘れているかどうかわかる何か。