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

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?

Please share, did you manage to implement it? I have the same problem — Fill
– Fill, Commented Jul 6, 2021 at 19:24

Fill · Accepted Answer · 2021-07-06 19:35:00Z

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

Wow! Thats really simple but makes sense that it should work! We abandoned the formly-approach actually. Wasn't worth the investment to port our existing complex forms to formly. But I expect we will be needing formly for new large forms - some which we will allow users to design. Am marking this as the answer!

Yehuda · Accepted Answer · 2022-06-14 06:53:13Z

0

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

answered Jun 14, 2022 at 6:53

Yehuda

912 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related