如何解决ngx-Formly-默认情况下显示第一个数组输入,而不初始化空模型
我正在使用ngx-formly的JSON Schema方法构建自定义表单(Angular 9 + ng-bootstrap + bootstrap 4)。我们的应用程序有很多数组输入-有些甚至嵌套。我使用了https://formly.dev/examples/advanced/json-schema中的自定义数组类型代码来实现数组显示。
基于数组输入模式的表单呈现-正确的意义是嵌套层次结构是必需的。但是,在数组输入的情况下-除非有人单击添加(加号)按钮以显示第一组输入,否则表单字段不会显示。从UI的角度来看,即使用户没有为数组输入任何值(这些不是强制性输入),我们也需要至少显示一组字段。
到目前为止,文档似乎有两种方法
- 使用数组的第一项为空或为空的方式初始化模型对象似乎是使字段显示的方法。但是我们需要进行空/脏/未改动的检查,才能不将这些字段提交给后端。
- 我们更改了数组类型定义文件中的模板,以默认显示一组空字段。还没有尝试过这种方法,不确定如果强制显示一组字段,数组字段的绑定将如何工作。
还有另外一种方法可以实现这一点-通过使用一些选项字段?
解决方法
我似乎找到了解决方案:)
需要放"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 举报,一经查实,本站将立刻删除。