react-reactive-form icon indicating copy to clipboard operation
react-reactive-form copied to clipboard

Add wrapper around nested controls with FormGenerator

Open arthurhamon opened this issue 2 years ago • 0 comments

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"
    }
  }
}

arthurhamon avatar Jan 24 '22 19:01 arthurhamon