版本:
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>
答案 0 :(得分:0)
我建议您使用ng-bootstrap
插件而不是ui-bootstrap
。 ui-bootstrap
将分组元素放在fieldset
而不是div
下,以便创建问题
答案 1 :(得分:0)
抱歉,忘了这个问题仍然没有答案。
我最终做的是切换到ngx-formly软件包,从那里开发很简单。