0

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

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

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

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

还有另一种方法可以实现这一点 - 通过使用一些选项字段？

4

1 回答 1

2

我似乎找到了解决方案:)

需要放"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"
                    }
于 2021-07-06T19:35:00.030 回答