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

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

我一直在尝试使用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 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-