如何在角度6中循环多个jquery表单生成器？

Question

我正在使用jquery表单生成器。我想在按钮单击上创建嵌套的jQuery构建器。我需要在表单生成器数组的控件中选择位置。

我需要这样做：多个jQuery构建器。

它对于单个fb编辑器工作正常。但这不允许我拥有多个编辑器。这是 Component.html 文件：

<form [formGroup]="form">
  <div class="col-md-10" formArrayName="user">
  <div *ngFor="let item of formDummyData; let i = index" formGroupName="{{i}}" formControlName="user">

  <div id="fb-editor{{i}}"*ngIf="form.controls.user.controls.length > 1" class="fb-editor" #formdata{{i}}>
  </div>
  </div>
  </div>
</form>

在组件TS 上：我将ViewChild声明为HtmlDivDocument。

export class RequestTypeComponent {
  @ViewChild('formdata') HTMLDivElement: ElementRef;
  @ViewChild('formdata1') HTMLDivElement1: ElementRef;

  constructor(private elementRef: ElementRef, private formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      'user': formBuilder.array([])
    });
  }

  ngOnInit() {
    this.formDummyData = [
      {
        name: [ this.HTMLDivElement, this.HTMLDivElement1]
      }
    ];
    if (this.formDummyData) {
      this.formDummyData.forEach(user => {
        this.addUser(user);
      });
    }
    else
    {
      this.addUser();
    }
  }

  ngAfterViewInit() {
    var fbEditor = document.getElementById('fb-editor');
    this.formBuilders = $(fbEditor).formBuilder({ disableFields: ['button', 'autocomplete', 'hidden'], showActionButtons: false, disabledAttrs: ["className", "access"] });

    var fbEditor1 = document.getElementById('fb-editor1');
    this.formBuilders = $(fbEditor1).formBuilder({ disableFields: ['button', 'autocomplete', 'hidden'], showActionButtons: false, disabledAttrs: ["className", "access"] });
  }
}

代码可在角度6中使用单个fb编辑器，但不适用于多个fb编辑器。