I am using ngx-formly's JSON Schema approach to build out custom forms (Angular 9 + ng-bootstrap + bootstrap 4). Our app has a lot of array inputs - some are nested even. I have used the custom array type code from https://formly.dev/examples/advanced/json-schema to implement the array display.
The rendering of the form based on the schema for array inputs - is correct in the sense that the hierarchy of nesting is as required. However in case of array inputs - the form fields do not appear until someone clicks on the add (plus) button to show the first set of inputs. From a UI standpoint, we need atleast one set of fields displayed even if the user does not enter any value for the array (these are not mandatory inputs).
So far from the documentation there seem to be two approaches
Is there another way we can achieve this - by using some option fields?
I seem to have found a solution :)
Need to put "defaultValue": [ "undefined" ]
.
Full code below.
{
"fieldGroup": [
{
"key": "driver_section",
"type": "repeatDrivers",
"defaultValue": [ "undefined" ],
"fieldArray": {
"fieldGroup": [
{
"key": "last_name",
"type": "input",
"className": "flex-2",
"defaultValue": "",
"templateOptions": {
"label": "Фамилия",
"required": true
}
},
{
"key": "first_name",
"type": "input",
"className": "flex-2",
"defaultValue": "",
"templateOptions": {
"label": "Имя",
"required": true
}
},
{
"key": "paternal_name",
"type": "input",
"className": "flex-2",
"defaultValue": "",
"templateOptions": {
"label": "Отчество",
"required": true
}
},
{
"key": "date_of_birth",
"type": "input",
"className": "flex-2",
"defaultValue": "",
"templateOptions": {
"type": "date",
"label": "Дата рождения",
"required": true
}
},
{
"key": "series_and_number_of_VU",
"type": "input",
"className": "flex-2",
"defaultValue": "",
"templateOptions": {
"type": "number",
"label": "Серия и номер ВУ",
"required": true
}
},
{
"key": "date_of_issue_of_the_current_VU",
"type": "input",
"className": "flex-2",
"defaultValue": "",
"templateOptions": {
"type": "date",
"label": "Дата выдачи действующего ВУ",
"required": true
}
},
{
"key": "year_of_issue_of_the_first_VU",
"type": "input",
"className": "flex-2",
"defaultValue": "",
"templateOptions": {
"type": "number",
"label": "Год выдачи первого ВУ",
"required": true
}
},
{
"key": "driver_license_changed",
"type": "checkbox",
"className": "flex-2",
"defaultValue": "",
"templateOptions": {
"label": "Водительское удостверение менялось в течение года",
"required": false
}
}
],
"fieldGroupClassName": "display-flex"
},
"templateOptions": {
"title": "Drivers",
}
}
],
"fieldGroupClassName": "display-flex"
}