json - 使用 Angular 2 从 JSON 动态创建带有输入控件的表单

Question

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

我是 Angular 2.0 和 Typescript 的新手。我完全不知道从哪里开始开发。

非常感谢任何帮助。

下面是示例 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
                            }
                        ]
                    }
                ]
            }
        ]
    }

Answer 1

创建动态表单组并循环遍历 json 并创建相应的元素，其中表单输入类型及其相关属性(如名称、值、占位符、类型、必需、模式等)根据资源的属性而变化。因此在运行时呈现表单。

引用资料

Creating forms in angular 2 using json schema at run time