微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决ngx-Formly-默认情况下显示第一个数组输入,而不初始化空模型

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

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

到目前为止,文档似乎有两种方法

  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","templateOptions": {
                                                "label": "Имя",{
                                            "key": "paternal_name","templateOptions": {
                                                "label": "Отчество",{
                                            "key": "date_of_birth","templateOptions": {
                                                "type": "date","label": "Дата рождения",{
                                            "key": "series_and_number_of_VU","templateOptions": {
                                                "type": "number","label": "Серия и номер ВУ",{
                                            "key": "date_of_issue_of_the_current_VU","label": "Дата выдачи действующего ВУ",{
                                            "key": "year_of_issue_of_the_first_VU","label": "Год выдачи первого ВУ",{
                                            "key": "driver_license_changed","type": "checkbox","templateOptions": {
                                                "label": "Водительское удостверение менялось в течение года","required": false
                                            }
                                        }
                                    ],"fieldGroupClassName": "display-flex"
                                },"templateOptions": {
                                    "title": "Drivers",}
                            }
                        ],"fieldGroupClassName": "display-flex"
                    }   

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?