ngx-Formly - 默认显示第一个数组输入而不初始化空模型

Question

我正在使用 ngx-formly 的 JSON 架构方法来构建自定义表单 (Angular 9 + ng-bootstrap + bootstrap 4)。我们的应用程序有很多数组输入——有些甚至是嵌套的。我使用了 https://formly.dev/examples/advanced/json-schema 中的自定义数组类型代码来实现数组显示。

基于数组输入模式的表单呈现 - 在嵌套层次结构符合要求的意义上是正确的。然而，在数组输入的情况下 - 表单字段不会出现，直到有人点击添加（加号）按钮以显示第一组输入。从 UI 的角度来看，我们需要至少显示一组字段，即使用户没有为数组输入任何值（这些不是强制输入）。

到目前为止，从文档来看似乎有两种方法

1. 用数组的第一项为空或 null 初始化模型对象似乎是使字段出现的方法。但是我们需要放入 empty/dirty/untouched 检查以不将这些字段提交到后端。
2. 我们将数组类型定义文件中的模板更改为默认显示一组空字段。没有尝试过这种方法，不确定如果强制显示一组字段，数组字段的绑定将如何工作。

是否有另一种方法可以实现此目的 - 通过使用一些选项字段？

Answer 1

我好像找到了解决办法:)

需要放"defaultValue": [ "undefined" ]。 完整代码如下。

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