在Angular 7中生成动态HTML

Question

我是Angular 1.5专家开发人员，在我们的新项目中，我们正在使用Angular 7构建动态复杂的表单，它可能具有多个字段：

1. 输入
2. 按钮
3. 自定义组件
4. 下拉
5. 点亮物品

此外，它可能在字段之间具有依赖性，这意味着在某些情况下需要为特定字段使用*ngIf。 现在，我想做的就是从外部JSON文件加载How the form should looks，例如以下示例：

 {
  'type': 'Dropdown',
  'label': 'Service',
  'model': {
    'defaultValue': 'TEST1',
    'name': 'SERVICE',
    'dropDownModel': {
      'staticValues': [{
        'label': 'Test 1',
        'value': 'TEST1'
      }, {
        'label': 'Test 2',
        'value': 'TEST2'
      }, {
        'label': 'Test 3',
        'value': 'TEST3'
      }]
    }
  }

然后，我遍历JSON并生成一个动态HTML，如JSON中所述。请注意，在model上有一个name属性，应将其连接到ngModel，并应将其添加到组件的viewModel。

在检查与此相关的文章后，我发现其中一些正在使用[innerHtml]，但是如果我将ngModel添加到生成的字段中，则对我来说不起作用。 另外，我尝试使用Reactive Forms并注意到我应该在HTML上编写一些静态代码。 您能协助最佳做法来做这件事吗？

Answer 1

这与我上周正在处理的问题完全相同。

经过长期研究，我来到：

https://github.com/hamzahamidi/Angular6-json-schema-form

您可以看看这个。