react-reactive-form
react-reactive-form copied to clipboard
Add wrapper around nested controls with FormGenerator
Hello,
I have this dynamically build fieldConfig and I have nested controls inside, see phoneNumberRow
prop.
How can I render the form with a div
around the two controls phoneNumberPrefix
and phoneNumber
?
const fieldConfig = {
"civility": {
"meta": {
"label": "Title",
"name": "civility",
"type": "hidden"
}
},
"firstName": {
"meta": {
"label": "First name",
"name": "firstName",
"type": "text"
}
},
"lastName": {
"meta": {
"label": "Surname",
"name": "lastName",
"type": "text"
}
},
"phoneNumberRow": {
"controls": {
"phoneNumberPrefix": {
"meta": {
"label": "Phone code",
"name": "phoneNumberPrefixChoiceList",
"optionList": [
{
"value": "ad_376",
"textLabel": "+376",
"listTextLabel": "+376 (Andorra)"
},
{
"value": "au_61",
"textLabel": "+61",
"listTextLabel": "+61 (Australia)"
},
{
"value": "at_43",
"textLabel": "+43",
"listTextLabel": "+43 (Austria)"
}
]
}
"formState": "au_61"
},
"phoneNumber": {
"meta": {
"label": "Mobile number",
"name": "phoneNumber",
"type": "number"
}
}
}
},
"company": {
"meta": {
"label": "Company (optional)",
"name": "company",
"type": "text"
}
}
}