角度-是否可以从非预定义对象创建FormGroup?

标题可能不清楚,但是我想不出比我现在的问题更好的东西(而且,英语不是我的母语)。

因此,通常在以角度构建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。说到这,要感谢那些花时间阅读这篇文章的人。

如果我设法解决了这个问题,我会把我的发现作为答案。

woshicgro 回答:角度-是否可以从非预定义对象创建FormGroup?

好,所以我解决了大部分问题。

我遇到的一个主要错误是没有意识到实际上我的每个“选项”块都是在自己的formGroup中创建的。所以我缺少的一个关键要素是:

      <div class="filters" [formGroup]="formGroup">
        <ng-container *ngFor="let filter of filterPreferences">
          <div class="filter-options">
       ---- a new div for the formGroups ------
            <div formGroupName="{{filter.filterName}}">

            <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>
       ----- end of the new div -----
          </div>
        </ng-container>
      </div>

请注意新div中 formGroupname 的引用。

例如,在以下块中:

  filterName: 'status',filterKey: 'Estado',options: [
    {
      optionName: 'open',optionKey: 'Abierta'
    },{
      optionName: 'closed',optionKey: 'Cerrada'
    },{
      optionName: 'ended',optionKey: 'Finalizada'
    }
  ]

我的.ts创建此表单组:

status: this.formBuilder.group({
  open: [''],closed: [''],ended: ['']
})

然后,我的html可以对其"let options of filter.options"进行迭代,并且由于对formGroupName的引用不在该ngFor循环之外,因此该formGroupName的名称保持不变。

嗯,或多或少。如果有人偶然发现了该线程,并希望获得更多有关此线程的信息或提示,请随时询问。

本文链接:https://www.f2er.com/3143576.html

大家都在问