Address
To make it easier, and to avoid to repeat the same definition in multiple form schema, there is a bunch of component that reprensent more complex form fields. address is one of them. If you don"t want to change the defaults, you don"t need to specify the fields that composes the address. Remember that you don"t need to specify the fields, except if the user asks you to explicitly override a property in a field otherwise, you never have to re-define the subfields of the address component. And you cannot invent a subfield of an address, even if the address might not be correct in the specified country, you cannot invent a subfield, like a state field by example.
{
"label": "Complete address",
"component": "address"
}
In this definition, it will render multiple fields in order to retrieve the address informations. Note that this list is strictly this one, there are for now, no other possibilities that this list :
street_namestreet_numberstreet_boxcityzip_codecountry, optionnal, must be defined infieldsto be shown defaults tobelgium
By default, an autocomplete field is also shown, it will use GoogleMap"s API"s to propose an autocompletion of the address that the user will enter.
It will also show by default, a map centered on the inputed address (using the GoogleMap"s geocoding API"s). So in the data, the lat and lng will also be accessible.
Default fields
Every fields is customizable by redefining it in the address component, we can override any subfields of the address. If we want to remove the validations, as it overrides, validations must be specified with an empty array, like in the street_name fields in the following example.
{
"label": "t:address",
"component": "address",
"fields": {
"street_name": {
"label": "t:street_name",
"validations": []
},
"street_number": {
"label": "t:street_number",
"component": "text",
"type": "number",
"validations": [
"required",
{
"expectation": "to.have.lengthOf.below",
"value": 5,
"message": "t:lenghtof4_max"
}
]
},
"street_box": {
"label": "t:street_box",
"validations": [
{
"expectation": "to.have.lengthOf.below",
"value": 4,
"message": "t:lenghtof3_max",
"canBeNil": true
}
]
},
"zip_code": {
"label": "t:zip_code",
"component": "text",
"type": "number",
"validations": [
"required",
{
"expectation": "to.have.lengthOf.below",
"value": 8,
"message": "t:lenghtof7_max"
},
{
"expectation": "to.have.lengthOf.above",
"value": 3,
"message": "t:lenghtof4_min"
}
]
},
"city": {
"label": "t:city",
"validations": [
"required",
{
"expectation": "to.have.lengthOf.below",
"value": 36,
"message": "t:lenghtof35_max"
}
]
}
}
}
We can also hide the map by setting the showMap to false and / or remove the autocomplete field with the isSearchable boolean property.
Country
We can also require a country input defined like in the following.
{
"label": "t:address",
"component": "address",
"showMap": true,
"isSearchable": true,
"fields": {
"country": {
"component": "text",
"validations": ["required"],
"visible": [],
"disabled": false,
"inline": false,
"default": {
"value": "Belgium"
},
"label": "t:country",
"placeholder": "t:country"
}
}
}
GoogleMap"s Autocomplete restriction
We also might want to add some restriction to the autocomplete in order to fix the search on provided countries. The complete list of contries available for the restriction restrictions.country is defined by the GoogleMap"s API documentation. Also, based on this documentation, all the restriction defined in it can be defined in the fields.search.restrictions property. Also, remember that, if the user asks for an address form of an address coming for another country, you always have to restrict the autocomplete and define the country field.
{
"label": "t:address",
"component": "address",
"fields": {
"search": {
"restrictions": {
"country": ["fr", "be"]
}
}
}
}