ngx-Formly - Display first array input by default without initializing empty model - angular9

Question

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
initializing a model object with an empty or null first item for the array seems to be the way to make the fields appear. But we would need to put in empty/dirty/untouched checks to not commit these fields to the backend.
we change the template in the array type definition file to show one empty set of fields by default. Have not tried this approach, not sure how the binding of array fields would work if displaying one set of fields is forced.
Is there another way we can achieve this - by using some option fields?

Answer 1

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

Answer 2

It seems nicer to write like
"defaultValue": [ {} ]
, and it also works great