Question

版本：

Angular 5.2.1

@ ng-dynamic-forms：5.4.2

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

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

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

目前，3个控件在不同的行上呈现。 layout.grid.container =＆＃34; row＆＃34;对象不起作用，但我无法弄清楚如何基本上添加bootstrap＆＃34; row＆＃34;包含前三个控件的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>

Answer 1

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

Answer 2

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

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

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

2 个答案: