如何在嵌套的 FormArrays 中添加元素？答案

【问题标题】：How to add an element in nested FormArrays?如何在嵌套的 FormArrays 中添加元素？
【发布时间】：2017-05-07 05:32:10
【问题描述】：

我在另一个数组中有一个这样的数组：

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

我想通过打字稿将项目添加到第二个数组。我尝试到达第二个数组 (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());
}

为什么我不能用这条线到达第二个数组？

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

有什么想法吗？

【问题讨论】：

标签： arrays angular typescript angular2-forms angular-reactive-forms

【解决方案1】：

尝试使用get方法，

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

更多详情可以参考Angular document

【讨论】：

【解决方案2】：

问题在于controlSp 是FormArray，因此要访问page_containers，就像任何其他常见的 array，您必须指定索引。

您可以使用FormArray#at 方法：

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

甚至更好地使用AbstractControl#get方法：

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

另外，您可能已经注意到，我将类型转换从 <variable> 更改为 as variable。

为什么？因为虽然as syntax 与 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>

【讨论】：