首页 > 解决方案 > 在 Angular 中在复杂的 JSON 上创建一个表单

问题描述

我正在开发一个 Angular Web 应用程序。在一个组件中,我收到一个复杂的 JSON,我需要创建一个尊重 JSON 结构的响应式表单。只是为了展示我的 JSON 示例:

{
    "annoAl": 2019,
    "annoDal": 2019,
    "azienda": {
        "id": 1,
        "uuid": null,
        "codice": "201",        
        "regioneId": 1,
        "sigla": "dummy"
    },
    "comune": null,
    "descrizione": "Turno ripartito",
    "giorni": [{
        "chiuso": false,
        "orari": [{
            "start": null,
            "end": null
        },
        {
            "start": null,
            "end": null
        }]
    },
    {
        "chiuso": false,
        "orari": [{
            "start": null,
            "end": null
        },
        {
            "start": null,
            "end": null
        }]
    },
    {
        "chiuso": false,
        "orari": [{
            "start": null,
            "end": null
        },
        {
            "start": null,
            "end": null
        }]
    }],
    "invertiIntervallo": false,
    "meseGiornoAl": null,
    "meseGiornoDal": null,
    "provenienza": "AZIENDA",
    "regione": null,
    "ripartizione": {
        "durataTurno": 7,
        "gruppi": [{
            "gruppo": 0,
            "sede": {
                "id": 11,
                "uuid": "11",
                "idFarmacia": 13,
                "idComune": 163,                
            }
        },
        {
            "gruppo": 1,
            "sede": {
                "id": 12,
                "uuid": "12",
                "idFarmacia": 11,
                "idComune": 163,                
            }
        },
        {
            "gruppo": 2,
            "sede": {
                "id": 8,
                "uuid": "8",
                "idFarmacia": 8,
                "idComune": 164,                
            }
        }],
        "gruppiNumero": 4
    },
    "ripetiAnnualmente": false,
    "sede": null,
    "tipo": "TURNO_RIPARTITO",
    "uuid": null
}

为了完成这个任务,我手动构建了响应式表单(这些字段是已知的)。有没有简单的方法来做到这一点?我尝试使用FormBuilder,但数组有一些问题。

formBuilder.group(jsonObject)

谢谢

标签: jsonangularangular-reactive-formsreactive-forms

解决方案


推荐阅读