logo标签列表

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

javascriptangulargitnpm
4
我在使用Angular 8构建JSON Schema动态表单时遇到困难。我找到了一些库可以实现此功能，但其中一个非常古老（最近一次提交约两年前），而其中的一个分支是今年更新的。
我不想使用第一个库，因为它已经过时且无法兼容Angular 8，所以我的选择是第二个库。但我遇到了麻烦，因为这个项目没有发布在npm仓库上，只能在GitHub上下载。我是这样从Git上下载的：
npm i rhalff/angular2-json-schema-form#angular-8

当我使用这个依赖项构建我的项目，并将导入附加到app.module.ts之后，结果如下：

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

我发现在node_module中没有src或dist文件夹，然后我查看了GitHub项目，发现在/.npmignore中有一个src。
我有一些解决方案，但它不是最终的解决方案，我认为这是一个非常糟糕的想法。我将在本地克隆git存储库，然后使用npm run build进行构建，然后在项目目录中使用npm link和npm link <someName>。
有人知道是否有解决此问题的方法，或者可以向我推荐其他用于将JSON Schema转换为Angular 8表单的库吗？
如果你认为你能让它工作，那么在你的 Github 上 fork 这个 package，在安装时运行 npm install --save username/repo#branch-name-or-commit-or-tag，并在你所做出自己的修改后确保它是公开的，方便 npm 找到。这是指如果你非常渴望使用它的话。看起来作者已经沉默了 2 年。 - joyBlanks
我指出第一个解决方案不是我的选择，在这个分支（第二个解决方案）中有一个名为angular8的分支，我想从中使用它。 - chebad
好的，抱歉我没有看到。是的，你可以从这里再次fork它，并尝试将src从npm ignore中删除，看看是否可以在你自己的GitHub账户中工作。 - joyBlanks
我找到了一个持续支持的工作分支，并且已经成功地将其集成到我的项目中。如果有人正在寻找可用的示例，这是 Github 上的分支：https://github.com/hamzahamidi/Angular6-json-schema-form 和 npm 上的链接：https://www.npmjs.com/package/angular6-json-schema-form。 - chebad
3个回答
9
0
你可以像这样做。它可能无法涵盖一些复杂的情况，但对于较简单的表单来说效果不错。
在 form.ts 文件中：
public form: FormGroup = new FormGroup({});
public fields = [
  {label: 'Full Name', name: 'full_name', type: 'text'},
  {label: 'Email', name: 'email', type: 'email'},
  {label: 'Comments', name: 'comments', type: 'textarea'},
]

constructForm(){
    let controls = {};
    fields.map(field => {
       controls[field.name] = new FormControl('');
    });
    this.form = new FormGroup(controls);
  }

在 form.html 中

   <form [formGroup]="form">
     <div *ngFor="let field of fields">
       <label for="{{field.name}}">{{field.label}}</label>
       <div [ngSwitch]="field.type">
    
          <!-- textarea -->
          <textarea *ngSwitchCase="'textarea'" [formControlName]="field.name"></textarea>
    
          <!-- other input fields (text, password, number, email) -->
          <input *ngSwitchDefault id="{{field.id}}" type="{{field.type || 'text'}}" [formControlName]="field.name" />
        </div>
     </div>
   </form>

这只是我正在做的基本结构。您可以为字段对象添加更多的属性，甚至可以添加“on change”处理函数并进行更多操作。例如：css_classes、maxlength，并且可以在HTML中使用field.propName。
像这样：
{label: 'Complex Field', name: 'complex_field, type: 'text', onChange: () => {console.log("Something Happened")}}

和

<input type="{{field.type}} (change)="field.onChange()" [formControlName]="field.name" />

祝你好运
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接