ng-dynamic-forms:json模型,在内联行上渲染3个控件

时间:2018-01-29 21:31:01

标签: angular forms dynamic ng-bootstrap

版本:

Angular 5.2.1

@ ng-dynamic-forms:5.4.2

@ ng-dynamic-forms / ui-bootstrap:5.4.2

这里没什么好看的......

使用以下JSON模型,我试图在同一个引导行上呈现表单的前3个控件,即' group'中的那些控件。

目前,3个控件在不同的行上呈现。 layout.grid.container =" row"对象不起作用,但我无法弄清楚如何基本上添加bootstrap" row"包含前三个控件的div的类。

非常感谢任何建议或见解。 TIA,Eric。

  jsonForm = `
[
  {
    "type": "GROUP",
    "id": "full_name",
    "layout": {
      "grid": {
        "container": "row"
      }
    },
    "group": [
      {
        "type": "INPUT",
        "id": "first_name",
        "label": "First Name",
        "maxLength": 20,
        "placeholder": "First Name",
        "layout": {
          "element": {
            "label": "First Name"
          },
          "grid": {
            "label": "col-sm-4",
            "control": "col-sm-4"
          }
        }
      },
      {
        "type": "INPUT",
        "id": "middle_initial",
        "label": "Middle Initial",
        "maxLength": 1,
        "placeholder": "Middle Initial",
        "layout": {
          "element": {
            "label": "First Name"
          },
          "grid": {
            "label": "col-sm-4",
            "control": "col-sm-4"
          }
        }
      },
      {
        "type": "INPUT",
        "id": "last_name",
        "label": "Last Name",
        "maxLength": 20,
        "placeholder": "Last Name",
        "layout": {
          "element": {
            "label": "First Name"
          },
          "grid": {
            "label": "col-sm-4",
            "control": "col-sm-4"
          }
        }
      }
    ]
  },
  {
    "type": "INPUT",
    "id": "ssn",
    "label": "SSN",
    "maxLength": 20,
    "placeholder": "###-##-####",
    "mask": ["/[0-9]/","/[0-9]/","/[0-9]/","-","/[0-9]/","/[0-9]/","-","/[0-9]/","/[0-9]/","/[0-9]/","/[0-9]/"],
    "validators": {
      "required": null
    },
    "errorMessages": {
      "required": "Field {{id}} is required"
    }
  }
]`;

表格代码:

<form [formGroup]="formGroup">
  <dynamic-bootstrap-form [group]="formGroup" [model]="formModel"></dynamic-bootstrap-form>
</form>

2 个答案:

答案 0 :(得分:0)

我建议您使用ng-bootstrap插件而不是ui-bootstrapui-bootstrap将分组元素放在fieldset而不是div下,以便创建问题

答案 1 :(得分:0)

抱歉,忘了这个问题仍然没有答案。

我最终做的是切换到ngx-formly软件包,从那里开发很简单。