使用Angular 2从JSON动态创建带有输入控件的表单 [英] Create a form with input controls dynamically from JSON using Angular 2

问题描述

我需要使用Angular 2.0从JSON动态创建带有控件的表单.

I need to create a form with controls dynamically from JSON using Angular 2.0.

我是Angular 2.0和Typescript的新手.我完全一无所知，从哪里着手进行开发.

I'm very new to Angular 2.0 and Typescript. I'm totally clueless, where to start with the development.

非常感谢您的帮助.

下面是示例JSON

"General": {
        "None": [
            {
                "FieldName": "100",
                "DisplayName": "Mapping Name",
                "ClassSize": "col-sm-6 col-xs-12",
                "Field": [
                    {
                        "ControlType": "TextBox",
                        "FieldClass": "col-sm-6 col-xs-12",
                        "Required": "True",
                        "MaxLength": "10",
                        "RegularExpression": ""
                    }
                ]
            },
            {
                "FieldName": "101",
                "DisplayName": "Select Target File Type",
                "ClassSize": "col-sm-6 col-xs-12",
                "Field": [
                    {
                        "ControlType": "Dropdown",
                        "FieldClass": "col-sm-6 col-xs-12",
                        "Required": "True",
                        "Options": [
                            {
                                "Description": "--Please select--",
                                "ID": 0
                            },
                            {
                                "Description": "Row Per Day",
                                "ID": 1
                            },
                            {
                                "Description": "Row Per Week",
                                "ID": 2
                            },
                            {
                                "Description": "Row Per Transaction",
                                "ID": 3
                            }
                        ]
                    }
                ]
            }
        ]
    }

推荐答案

创建动态表单组并遍历json并创建相应的元素，其中表单输入类型及其相关属性(例如名称，值，占位符，类型，必需，样式等)根据资源的属性而有所不同.因此，请在运行时呈现表单.

Create dynamic form group and loop through the json and create respective element, where forms input type and its related attributes(like name, value, placeholder,type,required,pattern etc) were varying as per resource's attributes. So render the forms at run time.

参考信息

创建在运行时使用json模式在angular 2中创建表单

这篇关于使用Angular 2从JSON动态创建带有输入控件的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！