简体   繁体   English

从 JSON 模式动态创建表单 [Angular 8]

[英]Dynamically create forms from JSON Schema [Angular 8]

I'm struggling with creating dynamically forms from JSON Schema in Angular 8. I found some libraries for that, but one is very old (last commit ~2 yr ago) and fork of it from this year.我正在努力从 Angular 8 中的 JSON 模式创建动态表单。我为此找到了一些库,但一个很旧(上次提交大约 2 年前)并且从今年开始分叉

I don't want to use first one, because it's deprecated with angular 8, so my choise was the second one.我不想使用第一个,因为它已被 angular 8 弃用,所以我的选择是第二个。 I have trouble because this project isn't on any npm repositories, only on github.我遇到了麻烦,因为这个项目不在任何 npm 存储库上,只在 github 上。 I downloaded it form git like this:我像这样从 git 下载它:

npm i rhalff/angular2-json-schema-form#angular-8

When I started to build my project with this dependency and after attach the import into app.module.ts the result is like this:当我开始使用此依赖项构建我的项目并将导入附加到app.module.ts ,结果如下所示:

ERROR in src/app/app.module.ts:20:65 - error TS2307: Cannot find module 'angular2-json-schema-form'.

I found that in node_module there isn't any src or dist folder and then I looked into github projecet and I found that in /.npmignore there is a src.我发现在node_module中没有任何 src 或 dist 文件夹,然后我查看了 github projecet,我发现在/.npmignore有一个 src。

I have a some solution about that, but it's not the final one and I think is really bad idea.我对此有一些解决方案,但这不是最后一个,我认为这真是个坏主意。 I will locally clone git repository, next then build it with npm run build and then npm link and then npm link <someName> in project catalog.我将在本地克隆 git 存储库,然后在项目目录中使用npm run build然后npm linknpm link <someName>构建它。

Can anyone know is there any solution of this problem or maybe someone can suggest me any other libraries for converting JSON Schema for Angular 8 forms?谁能知道这个问题有什么解决方案,或者有人可以向我建议任何其他库来将 JSON Schema 转换为 Angular 8 表单?

您可以考虑使用支持json-schema Formly ,它提供了一堆示例以开始使用https://formly.dev/examples/advanced/json-schema

You can use dynamic-form-schema .您可以使用dynamic-form-schema It is completely schema based and provide options to add validations, conditional validations and drop down conditional option in the schema.它完全基于模式,并提供在模式中添加验证、条件验证和下拉条件选项的选项。 For more details, check link: Rapid Angular Reactive Form Component Development Based on a Schema有关更多详细信息,请查看链接: 基于 Schema 的快速 Angular Reactive Form 组件开发

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM