入れ子になったFormArraysに要素を追加する方法は？

Question

私はそのような別の配列の配列を持っている：

<div class="col-sm-6"> 
    <div formArrayName="site_source_pages"> 
    <div *ngFor="let site_source_page of siteForm.controls.site_source_pages.controls; let x=index"> 
     <div [formGroupName]="x"> 
     <div class="card card-accent-success"> 
      <div class="card-header"> 
      <strong>Yeni Kaynak Sayfa</strong> 
      </div> 
      <div class="card-block"> 
      <div class="row"> 
       <!--Site Page Source Form Group--> 
       <div class="form-group"> 
       <div class="form-group col-sm-6"> 
        <label for="page_url">Sayfa Url</label> 
        <!--<label *ngIf="!site_source_page.controls[x].controls.page_url.valid" class="text-danger">*</label>--> 
        <input type="text" class="form-control" id="page_url" placeholder="Badge-Manager" formControlName="page_url"> 
       </div> 
       </div> 
       <div class="form-group col-sm-6"> 
       <label for="postal-code">Tarama Aralığı</label> 
       <input type="text" class="form-control" id="postal-code" placeholder="Badge-Email"> 
       </div> 
      </div> 
      <div class="row"> 
       <div formArrayName="page_containers"> 
       <div *ngFor="let page_container of site_source_page.controls.page_containers.controls; let i=index"> 
        <div [formGroupName]="i"> 
        <div class="col-sm-4"> 
         <div class="form-group"> 
         <label for="ccnumber">Container {{i + 1}} Type</label> 
         <label [hidden]="site_source_page.controls.page_containers.controls[i].controls.container_type.valid" class="text-danger">*</label> 
         <input type="text" class="form-control" id="container_type" placeholder="Container Type" formControlName="container_type"> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="form-group"> 
         <label for="ccnumber">Container {{i + 1}} Selector Type</label> 
         <input type="text" class="form-control" id="selector_type" placeholder="Container Selector Type" formControlName="selector_type"> 
         </div> 
        </div> 
        <div class="col-sm-4"> 
         <div class="form-group"> 
         <label for="ccnumber">Container {{i + 1}} Css Query</label> 
         <span class="glyphicon glyphicon-remove pull-right" *ngIf="site_source_page.controls.page_containers.controls.length > 1" (click)="removePageContainer(i)">x</span> 
         <input type="text" class="form-control" id="container_css_query" placeholder="Container Css Query" formControlName="selector_css_query"> 
         </div> 
        </div> 
        <div class="col-sm-12"> 
         <button type="button" class="btn btn-secondary btn-block" (click)="addPageContainer(x)">Container Ekle</button> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

私はtypescriptです経由で二番目の配列に項目を追加したいです。私は二番目の配列（page_containers）に達するが、このエラーを取得しよう：私はこのラインで二番目の配列に達することができないのはなぜ

addPageContainer(x: number) { 
    // add container to the list  
    const controlSp = <FormArray>this.siteForm.controls['site_source_pages']; 
    const controlPc = <FormArray>controlSp.controls['page_containers']; 
    controlPc.push(this.initPageContainer()); 
} 

：

Cannot read property 'controls' of undefined

My機能はそのようなものですか？

const controlPc = <FormArray>controlSp.controls['page_containers']; 

Answer 1

問題はcontrolSpが他の共通として、アクセスpage_containersになるよう、FormArrayであるということであるあなたがAngular document

Answer 2

を参照することができます詳細については

controlSp = <FormArray> this.siteForm.get('site_source_pages'); 

、getメソッドを使用してみてくださいarray、インデックスを指定する必要があります。あなたは私からキャストタイプを変更するに気づいたかもしれないとして、また

addPageContainer(index: number) { 
    const controlPc = this.siteForm.get(`site_source_pages.${index}.page_containers`) as FormArray; 
    controlPc.push(this.initPageContainer()); 
} 

：AbstractControl#get方法を使用して

const controlSp = <FormArray>this.siteForm.controls['site_source_pages']; 
const controlPc = <FormArray>controlSp.at(x).controls['page_containers']; 

またはより良い：

あなたはFormArray#at方法を使用してそれを行うことができます<variable>〜as variable。

なぜですか？ asの構文はJSX/TSX構文と完全に互換性がありますが、それ以外の方法はありません。

これに問題がなければ、好きなものを使用できます。

---

つまり、アドバイスとして、HTMLを大幅に簡略化することができます。

あなたが持つことができる

*ngFor="let site_source_page of siteForm.controls.site_source_pages.controls" 

[hidden]="site_source_page.controls.page_containers.controls[i].controls.container_type.valid 

*ngIf="site_source_page.controls.page_containers.controls.length > 1 

（順序で行）：

*ngFor="let site_source_page of siteForm.get('site_source_pages').controls" 

*ngIf="page_container.get('container_type').invalid 

*ngIf="site_source_page.get('page_containers').length > 1" 

また

---

、ちょうどマイナー注：

ザ・代わりに（順番でライン）の

次の行は実際にコメントされていますが、無効です：

<label *ngIf="!site_source_page.controls[x].controls.page_url.valid" class="text-danger">*</label> 

それは次のようになります。

<label *ngIf="!site_source_page.controls.page_url.valid" class="text-danger">*</label> 

またはより良い：

<label *ngIf="site_source_page.get('page_url').invalid" class="text-danger">*</label>