Javascript 在HTML中绘制表单组

我试图根据来自服务器的数据绘制具有嵌套节的表单的HTML，并且没有预定义的嵌套节数 如下

HTML

formService.js

createSubjectForm(scope, subject) {
    scope.subjectForm = this.fb.group({
      'path': [[]],
    });
    if (subject.subjectFormatSubjects)
      this.createSectionForm(scope.subjectForm.controls, subject.subjectFormatSubjects.data)
  }
  createSectionForm(formPath, sections) {
    if (!formPath['structure'])
      formPath['structure'] = this.fb.array([]);
    sections.forEach((section) => {
      (<FormArray>formPath['structure'].controls).push(this.fb.group({
        'title': [section.title, Validators.required]
      }));
      const sectionIndex = formPath['structure'].controls.length - 1;
      formPath['structure'].controls[sectionIndex].controls['path'] = this.fb.control([...formPath.path.value, sectionIndex]);
      if (section.subjectFormatSubjects) {
        this.createSectionForm(formPath['structure'].controls[sectionIndex].controls, section.subjectFormatSubjects.data);
      }
    });
  }

createSubjectForm（范围、主题）{
scope.subjectForm=this.fb.group({
“路径”：[[]]，
});
if（subject.subjectFormatSubjects）
this.createSectionForm（scope.subjectForm.controls、subject.subjectFormatSubjects.data）
}
createSectionForm（formPath，sections）{
如果（！formPath['structure']））
formPath['structure']=this.fb.array（[]）；
节。forEach（（节）=>{
（formPath['structure'].controls）。推送（this.fb.group({
“标题”：[section.title，Validators.required]
}));
const sectionIndex=formPath['structure'].controls.length-1；
formPath['structure'].controls[sectionIndex].controls['path']=this.fb.control（[…formPath.path.value，sectionIndex]）；
if（主题格式主题部分）{
这个.createSectionForm（formPath['structure'].controls[sectionIndex].controls，section.subjectFormatSubjects.data）；
}
});
}

您的实际需求是什么？请共享example-component.ts文件，让我们看看您是如何创建tempSectionForm的。也许用反应形式？您可以使用它们，在从服务器获取数据后，使用result设置其值。我对演出没有把握。如果您不知道reactiveforms，请看这里。在第2节中，还有npm包帮助您在表单结构中使用json创建表单。其中有同名的组。这可能会在创建表单组或html时导致一些错误。如果您提供一些.ts，也许我们可以帮助您。@Adam我已经使用了反应式表单，请查看component.ts和service@h4ckthepl4net我纠正了错误，请查看component.ts和服务您的实际需求是什么？共享您的example-component.ts文件，让我们看看您是如何创建tempSectionForm的。也许用反应形式？您可以使用它们，在从服务器获取数据后，使用result设置其值。我对演出没有把握。如果您不知道reactiveforms，请看这里。在第2节中，还有npm包帮助您在表单结构中使用json创建表单。其中有同名的组。这可能会在创建表单组或html时导致一些错误。如果您提供一些.ts，也许我们可以帮助您。@Adam我已经使用了反应式表单，请查看component.ts和service@h4ckthepl4net我纠正了错误，请看一下component.ts和服务

<form [formGroup]="subjectForm">
  <div formArrayName="structure">
    <ng-container
      *ngTemplateOutlet="
        sectionDetails;
        context: {
          sectionIndex: sectionIndex,
          sectionForm: subjectForm.controls.structure.controls[sectionIndex]
        }
      "
    ></ng-container>
    <ng-template
      #sectionDetails
      let-tempSectionIndex="sectionIndex"
      let-tempSectionForm="sectionForm"
    >
      <div [formGroupName]="tempSectionIndex">
        <input
          type="text"
          nbInput
          formControlName="title"
          status="info"
          placeholder="Section titless"
        />
        <div formArrayName="structure">
          <ng-container
            *ngFor="
              let form of tempSectionForm.controls.structure.controls;
              let i = index
            "
          >
            <ng-container
              *ngTemplateOutlet="
                sectionDetails;
                context: {
                  sectionIndex: i,
                  sectionForm: tempSectionForm.controls.structure.controls[i]
                }
              "
            ></ng-container>
          </ng-container>
        </div>
      </div>
    </ng-template>
  </div>
</form>

ngOnInit() {
 this.subjectService.createSubjectForm(this, this.subject);
}

createSubjectForm(scope, subject) {
    scope.subjectForm = this.fb.group({
      'path': [[]],
    });
    if (subject.subjectFormatSubjects)
      this.createSectionForm(scope.subjectForm.controls, subject.subjectFormatSubjects.data)
  }
  createSectionForm(formPath, sections) {
    if (!formPath['structure'])
      formPath['structure'] = this.fb.array([]);
    sections.forEach((section) => {
      (<FormArray>formPath['structure'].controls).push(this.fb.group({
        'title': [section.title, Validators.required]
      }));
      const sectionIndex = formPath['structure'].controls.length - 1;
      formPath['structure'].controls[sectionIndex].controls['path'] = this.fb.control([...formPath.path.value, sectionIndex]);
      if (section.subjectFormatSubjects) {
        this.createSectionForm(formPath['structure'].controls[sectionIndex].controls, section.subjectFormatSubjects.data);
      }
    });
  }