Javascript 使用angular 6从JSON加载动态表单

我正在使用链接创建6个有角度的动态表单

在这里，我给出了以下问题。service.ts

 getQuestions() {

    let questions: DynamicBase<any>[] = [

      new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        type: 'text',
        value: '',
        required: true,
        order: 1
      }),

      new TextboxQuestion({
        key: 'emailAddress',
        label: 'Email',
        type: 'email',
        order: 2
      }),

      new DropdownQuestion({
        key: 'brave',
        label: 'Bravery Rating',
        options: [
          {key: 'solid',  value: 'Solid'},
          {key: 'great',  value: 'Great'},
          {key: 'good',   value: 'Good'},
          {key: 'unproven', value: 'Unproven'}
        ],
        order: 4
      }),
    ];

    return questions.sort((a, b) => a.order - b.order);
}

我想从JSON加载数据

"dynamicJSON": [
    {
        "key": "role_name",
        "label": "Role Name",
        "type": "text",
        "value": "",
        "required": true,
        "order": 1
    },
    {
        "key": "last_ame",
        "label": "Last Name",
        "type": "text",
        "value": "",
        "required": true,
        "order": 2
    }
]

为此，我使用了以下内容：

    let newArray = dynamicJSON;

    let questions: DynamicBase<any>[] = [    

    newArray.forEach(element => { 
        new TextboxQuestion(element)
    });

    ];

    return questions.sort((a, b) => a.order - b.order);

但是，我得到的错误是未定义的键。。当我控制台时，问题也显示为[未定义]

如何在表单对象（如textbox）内传递动态json值？

---

请帮助我摆脱困境，因为我已经被困了很长时间。

您没有在问题数组中推TextboxQustion对象。我已经在上创建了示例，请检查

这是ts代码

让newArray=this.dynamicJSON；
让问题：any=[]
newArray.forEach（元素=>{
问题。推送（元素）
});
问题.排序（（a，b）=>a.order-b.order）；

我创建了一个示例应用程序，该应用程序基于动态json生成带有验证的表单。请参考stackblitz示例：

我已经实现了最短（更少代码）的方法来生成动态表单

以下是组件代码：

ngOnInit（）{
this.sortdynamicsjson（）；
this.questionFormGroup=this.formBuilder.group({
问题：this.formBuilder.array（[]）
})
this.generateForm（）
}
generateForm（）{
this.dynamicJSON.forEach（t=>{
让questions=this.questionFormGroup.controls[“questions”]；
问题。推送（this.formBuilder.group({
值：[t.value，[t.required？验证器。required:null]]
}))
})
}

正如您看到的上述代码，我已经生成了FormGroup with value属性，因为其他属性与表单无关

现在我已经在HTML中应用了dynamicJSON数组对象的循环，并绑定了表单

以下是HTML代码：

{{row.label}
您可以这样做来将数组推入newarray，然后对其执行其他操作吗
json.Results.forEach（element=>{newarray.push（element.Id）；}）谢谢你的帮助。。请在您提供的示例中至少生成一个文本框。因为使用这个我只能得到标签和必需的字段消息。。如果你生成一个文本框，那么它会更有用。好的，我会在一段时间后更新你，表单中是否需要其他动态验证，或者只是需要？Ajay，因为我是角度和动态表单的新手，请帮助我摆脱它。。根据我的理解，我已发展出上述类似问题。。要求是我需要使用动态表单创建
textbox、单选按钮、selectbox
的示例，这些值也需要来自动态JSON，现在我有了这个要求。。如果有任何需要，我会及时通知你。。我请求您使用动态表单从JSON单独生成textbox、radio和selectbox。。请帮助我。我已经分享了两个动态JSON验证的最佳解决方案，如果您对其中一个最适合您的应用程序的解决方案有任何问题，请告诉我。Ajay，感谢您为此花费宝贵的时间，但这两个新解决方案并不是我所期望的。。我发布的旧答案和第一个答案（这篇评论的答案）都是我所期望的。。我也不应该在我的项目中添加任何第三方插件。。我知道动态形式是反应形式的一部分，但我需要单独使用角度动态形式中的所有内容。。有了这个答案，您可以修改相同的动态表单，并在视图中单独给出
文本框、复选框、单选按钮的结果吗？
    let newArray = dynamicJSON;

    let questions: DynamicBase<any>[] = [    

    newArray.forEach(element => { 
        new TextboxQuestion(element)
    });

    ];

    return questions.sort((a, b) => a.order - b.order);

{key: "role_name", label: "Role Name", type: "text", value: "", required: true, …}