我在另一个数组中有一个数组:
<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());
}
为什么我不能用这条线到达第二阵列?
const controlPc = <FormArray>controlSp.controls['page_containers'];
有什么想法吗?
答案 0 :(得分:0)
尝试使用get方法,
controlSp = <FormArray> this.siteForm.get('site_source_pages');
有关详细信息,请参阅Angular document
答案 1 :(得分:0)
问题是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
语法与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>