标题可能不清楚,但是我想不出比我现在的问题更好的东西(而且,英语不是我的母语)。
因此,通常在以角度构建FormGroups时,您通常会知道如何标记或命名每个字段或FormControl,因为通常,您再次知道表单必须预先控制和验证的属性。因此,例如,对于先前已知的myHouse
对象,我可以这样做:
myHouse = new FormGroup({
door: [''],size: [''],windows: new FormGroup({
size: [''],clarity: ['']
...
});
})
您明白了。但是我目前正在创建一个组件,该组件要用作应用程序的侧面“过滤器”栏。关键是我希望该组件可重复使用,并且由于该流程的需要,它的工作方式如下:
-
父组件构建了一个我命名为
filterPreferences
的对象数组,并将其传递给我的Filter组件,后者以@Input()的形式接收它。该对象将如下所示:this.filterPreferences = [{ filterName: 'status',filterKey: 'Estado',options: [ { optionName: 'open',optionKey: 'Abierta' },{ optionName: 'closed',optionKey: 'Cerrada' },{ optionName: 'ended',optionKey: 'Finalizada' } ]
...之后还有更多对象。 }]
-
在此对象数组中,filterName表示参数的类型,而optionName表示该参数可以具有的不同选项(项目的状态可以为 open ,关闭或结束)。用于i18l转换的filterKey和optionKey属性。
-
子组件(过滤器组件)将接收该对象数组并基于该对象构建FormGroup或FormArray,以便在用户完成选择一系列过滤器后,子组件可以将该选择传递回去到其各自的父级。
这里的症结在于,我的组件从一开始就不知道字段或参数,就像前面的house
FormGroup的示例一样。不同的父组件可以将不同的信息块传递给该组件。每个父组件将使用相同的filterNames,filterKeys,optionNames等结构,但是每个参数的条目数和名称将有所不同。
试图用一种伪代码来说明我的(失败的)尝试,我觉得我应该做的是遵循以下的思路:
-在我的声明中,const formArray = this.formBuilder.array([]);
createForm() {
this.filterPreferences.forEach((item) => {
const optionNames = item.options.map(( opt ) => opt.optionName);
item.FilterName = new FormGroup({
optionNames = new FormControl('');
})
this.formArray.push(item.filterName);
)}
}
基本上遍历我的filterPreferences
对象或对象数组,并为每个对象构建一个formGroup。此表单的html如下所示:
<div class="filters" [formGroup]="formGroup">
<ng-container *ngFor="let filter of filterPreferences">
<div class="filter-options">
<h4>{{filter.filterKey}}</h4>
<div *ngFor="let options of filter.options">
<app-checkbox-input
formControlName="{{options.optionName}}"
class="float-left mr-3 mb-3"
[label]=" options.optionKey ">
</app-checkbox-input>
</div>
</div>
</ng-container>
</div>
以前有人遇到过这样的问题吗?如果是这样,您如何解决呢?
很抱歉,帖子的长度,如果不清楚,如果可以的话我会稍后再做一个Plunker。说到这,要感谢那些花时间阅读这篇文章的人。
如果我设法解决了这个问题,我会把我的发现作为答案。