如何使用重复类型正确遍历ngx-formly字段一次显示一个问题？

编程问答 2022-08-14

问题描述

我一直在尝试使用ngx-form替换我们当前的表单，这些表单是多步表单，一次显示一个questionGroup，每个问题有几个字段（输入，选择等）。这些问题组也嵌套在部分中。

Form = {
  id: 1,title: "Auto Form"
  sections: [
     {
        title: "Drivers",questionGroups: [  {header: "Can you tell us about the driver?",questions: [ { placeholder: "First Name",type: "input" }   ] } ]
     } 
  ]
}

正式使用-我发现了我需要的多种功能，以便一次显示一个部分，一个questionGroup和多个问题。这包括用于重复对象的“重复自定义类型”，文档中显示的“多步骤”方法和包装器功能，因此我可以使用标题和某些样式包装每个questionGroup。

我正在艰难地以最好的方式将所有内容整合在一起。这是我的闪电战： https://stackblitz.com/edit/angular-s5v2qa?file=src%2Fapp%2Fapp.component.html

您将在这里看到我实现了Repeat，Wrapper和一个模拟多步骤方法的循环。我遇到的问题是：

在重复的示例中，它显示您直接调用一个字段而不是field.fieldArray-我出于某种原因不得不调用field.fieldArray来使其工作。 当在非重复字段旁边使用重复字段时，很难遍历并显示适当的形式。我不确定我是否正确执行此操作，但是我正在检查是否field.type ==='repeat'，如果是，我正在实现略有不同的逻辑。这可能是因为我的初始对象设置不正确，对您来说看起来合适吗？ 我在将事件从重复组件发送回原始app.component时遇到麻烦。然后，我最好将事件输出到父组件。我应该使用FieldConfig属性之一来执行此操作吗？ 在重复类型方面，我也遇到了一些嵌套问题。表单一次只能显示一个问题组，无论其是否为重复类型，但是在您的示例中，重复对象一次列出了多个问题。如何转换repeat.html文件，以便添加“ Driver”将我带回到Driver 2的QuestionGroup 1？ 任何建议都将非常有帮助！每个孤立的功能对我来说都不是问题，但是当我尝试将它们混合在一起以创建一个显示一个问题的多步骤表单时

===更新08-26-2020

所以我进步很大。我没有意识到在重复组件中添加某个实例后会填充fieldGroup（我假设add（）将fieldGroup从fieldArray克隆到fieldGroup属性中）。这样我就可以使重复组件起作用。我还分层了一些名为formType，sectionType和questionGroupType的自定义组件，这些组件如您在示例中建议的那样帮助清理了很多循环（再次感谢您！）。这意味着将处理1、2和4。我唯一的麻烦是处理父组件和正式组件（子组件）之间的事件（上面的＃3）。我们在nx mono-repo中将formly用作lib，以便我们可以在Form Builder预览以及用户填写表单的实际表单视图中显示该表单。看起来像这样：

// Our form app => apps/form/app-form.component.html
<section>
  <app-mono-form-viewer
    [form]="appForm"
  ></app-mono-form-viewer>
</section>
<div>
  <button>Next</button>
</div>

// app-mono-form-viewer => lib/formly/app-mono-form-viewer.component.html
<form [formGroup]="form" (ngSubmit)="submit()">
  <formly-form 
    [model]="model" 
    [fields]="fields" 
    [options]="options"
    [form]="form">
  </formly-form>
</form>

我已经成功做到了，因此我可以使用自定义组件中的按钮（即“下一个问题组”或“添加驱动程序”）一次处理一个问题组。有谁知道我们如何从按钮单击顶部父组件app-form.component.ts中获得这些事件。我们需要在父级中更新一些UI组件，这些UI组件仅存在于app-form组件中，而不存在于正式的lib中？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularjavascriptngx-formlyreactive-programmingrxjs