如何从Angular中的JSON动态创建多个FormControl？

Question

我有一个项目需要在Angular中动态创建formcontrol，该控件基于API调用返回的json。在API返回的确切json下方。

{
    "flexFieldName": {
        "label": "Flexfield Name",
        "value": "01-110002-001-02",
        "type": "text",
        "validation": {
            "required": true
        }
    },
    "flexFieldDescription": {
        "label": "Flexfield Name",
        "value": "CEI-Cash in Bank-Dormitory-Administration",
        "type": "text",
        "validation": {
            "required": true
        }
    },
    "flexFieldShortKey": {
        "label": "Flexfield Short Key",
        "value": "Cssh In Bacnk",
        "type": "text",
        "validation": {
            "required": true
        }
    },
    "flexFieldActive": {
        "label": "Active",
        "value": true,
        "type": "checkbox"
    },
    "flexFieldCombination": [
        {
            "label": "Company",
            "value": "CEI | 01",
            "type": "select",
            "option": [
                {
                    "label": "CEI | 01",
                    "value": "e931b7d1-541c-4c80-9bf7-353dbedc9e5d"
                }
            ],
            "validation": {
                "required": true
            }
        },
        {
            "label": "Account",
            "value": "Cash in Bank | 110002",
            "type": "select",
            "option": [
                {
                    "label": "Accounts Payable | 310001",
                    "value": "07d7b721-7212-4507-afe0-642a984f13a9"
                },
                {
                    "label": "Accounts Receivable | 120001",
                    "value": "fdd55a2c-b91e-45bb-af6a-1c86b8329afc"
                },
                {
                    "label": "Advances to Customers | 120003",
                    "value": "c1070f7c-702d-442b-a735-060d95bb1e9b"
                },
                {
                    "label": "Advances to Officers and Employees | 120002",
                    "value": "07b52e9c-ace2-4e98-91ff-83bd316923fe"
                },
                {
                    "label": "Cash in Bank | 110002",
                    "value": "bb4aa16f-bb60-48af-ac4e-83296af088d3"
                },
                {
                    "label": "Cash On Hand | 110001",
                    "value": "a263b54f-7b0f-4b27-b572-aca3f688e14e"
                },
                {
                    "label": "Common Stock | 510001",
                    "value": "dd8517b9-2788-4c3a-b744-fbcbcc4760a9"
                },
                {
                    "label": "Furnitures and Fixtures | 210001",
                    "value": "e68a4cf5-b2a5-43ec-885c-3bd1dfdb7ca0"
                },
                {
                    "label": "Loan Payable | 410001",
                    "value": "e0ba1cd0-9c93-4ba9-9889-cc5fe2e8eb85"
                },
                {
                    "label": "Petty Cash Fund | 110003",
                    "value": "00dedd3a-6dfb-432e-ac38-52d3c006d14a"
                },
                {
                    "label": "Preferred Stock | 510002",
                    "value": "f3741010-4f2e-4513-873e-e1cd74f9a157"
                },
                {
                    "label": "Retained Earnings | 510003",
                    "value": "61e2b456-05a7-4cad-acb6-8a3f6a61e7d8"
                }
            ],
            "validation": {
                "required": true
            }
        },
        {
            "label": "Cost Center",
            "value": "Dormitory | 001",
            "type": "select",
            "option": [
                {
                    "label": "Commercial | 002",
                    "value": "7b42d600-03fe-4907-96b5-f2e90edbd808"
                },
                {
                    "label": "Dormitory | 001",
                    "value": "5d56f5c0-e1a3-47b1-a45d-67720f1714ad"
                },
                {
                    "label": "Miscellaneous | 003",
                    "value": "fa4f3b64-4786-4122-9d91-f54de746617f"
                }
            ],
            "validation": {
                "required": true
            }
        },
        {
            "label": "Department",
            "value": "Administration | 02",
            "type": "select",
            "option": [
                {
                    "label": "Administration | 02",
                    "value": "7ec1fece-e102-453a-aa31-9cab510b613c"
                },
                {
                    "label": "Sales and Marketing | 01",
                    "value": "e955769a-3236-4445-8218-243400ccc3c5"
                }
            ],
            "validation": {
                "required": true
            }
        }
    ],
    "validation": {
        "required": true
    }
}

Answer 1

您可以使用Form.io，它可以帮助您基于JSON呈现表单。