# ng-form-design 表单渲染器
表单渲染器提供根据配置好的表单进行填报页面绘制和基于配置的表单和填报的数据进行展示的两大功能。
## 1、表单填报
### 1.1 基础用法
基础用法使用ng-form-build组件，绑定要使用的动态表单模板即可。
```
<template>
<div style="padding: 20px;">
<ng-form-build ref="formBuild" :formTemplate="form" />
<div style="text-align: center;">
<el-button type="primary" size="mini" @click="dataFormSubmit()">提交</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"prepend": "",
"append": "",
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "输入框",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "input_1679555907411",
"key": "input_1679555907411",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 100,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
}
}
},
methods: {
dataFormSubmit() {
const models = this.$refs.formBuild.getData(false)
console.log('表单提交:' , JSON.stringify(models))
}
}
}
</script>
```
### 1.2 数据字典&axios请求配置
类似ng-form-design中的字典配置和axios请求配置，此处的config和之前确保一样。否则可能造成编辑时预览的结果和实际这边表单填报时的结果对不上。
```
<template>
<div style="padding: 20px;">
<ng-form-build ref="formBuild" :config="config" :formTemplate="form" />
<div style="text-align: center;">
<el-button type="primary" size="mini" @click="dataFormSubmit()">提交</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"prepend": "",
"append": "",
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "姓名",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "name",
"key": "input_1679557329971",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
]
},
{
"type": "radio",
"options": {
"defaultValue": "",
"placeholder": "请输入",
"dynamic": 2,
"options": [
{
"value": "1",
"label": "选项1"
},
{
"value": "2",
"label": "选项2"
}
],
"remoteFunc": "",
"dataPath": "",
"remoteValue": "",
"remoteLabel": "",
"dictType": "sex",
"hidden": false,
"disabled": false,
"linkage": false,
"linkData": []
},
"label": "性别",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "sex",
"key": "radio_1679557329971",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 100,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
},
config: {
httpConfig: (config)=>{
config.headers['aaaa'] = 'bbbb'
return config
},
dict: [
{type: 'sex' , label: '男' , value: '1'},
{type: 'sex' , label: '女' , value: '2'},
{type: 'yes_or_no' , label: '是' , value: '1'},
{type: 'yes_or_no' , label: '否' , value: '2'},
{type: 'nation' , label: '汉族' , value: '1'},
{type: 'nation' , label: '蒙古族' , value: '2'},
{type: 'nation' , label: '藏族' , value: '3'},
{type: 'nation' , label: '壮族' , value: '4'}
]
}
}
},
methods: {
dataFormSubmit() {
const models = this.$refs.formBuild.getData(false)
console.log('表单提交:' , JSON.stringify(models))
}
}
}
</script>
```
### 1.3 显示并编辑已存在的数据
表单填写时如果需要编辑历史数据，则通过后台将上次编辑的数据拿到后，直接绑定models属性即可。
参考：
```
<template>
<div style="padding: 20px;">
<ng-form-build ref="formBuild" :models="models" :config="config" :formTemplate="form" />
<div style="text-align: center;">
<el-button type="primary" size="mini" @click="dataFormSubmit()">提交</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"prepend": "",
"append": "",
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "姓名",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "name",
"key": "input_1679557329971",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
]
},
{
"type": "radio",
"options": {
"defaultValue": "",
"placeholder": "请输入",
"dynamic": 2,
"options": [
{
"value": "1",
"label": "选项1"
},
{
"value": "2",
"label": "选项2"
}
],
"remoteFunc": "",
"dataPath": "",
"remoteValue": "",
"remoteLabel": "",
"dictType": "sex",
"hidden": false,
"disabled": false,
"linkage": false,
"linkData": []
},
"label": "性别",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "sex",
"key": "radio_1679557329971",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 100,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
},
config: {
dict: [
{type: 'sex' , label: '男' , value: '1'},
{type: 'sex' , label: '女' , value: '2'}
]
},
// 标记历史数据
models: {
sex: '2'
}
}
},
methods: {
dataFormSubmit() {
const models = this.$refs.formBuild.getData(false)
console.log('表单提交:' , JSON.stringify(models))
}
}
}
</script>
```
### 1.4 效验
ng-form-build中每个组件均支持三种效验规则：
1、 必填效验
2、 正则效验
3、 表达式效验
默认触发为 失去焦点和数据改变 触发，有些场景下需要我们手动效验整个表单，此时ng-form-build中提供了方法： validate 。
示例：
```
<template>
<div style="padding: 20px;">
<ng-form-build ref="formBuild" :formTemplate="form" />
<div style="text-align: center;">
<el-button type="primary" size="mini" @click="dataFormValidator()">效验</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"prepend": "",
"append": "",
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "名称",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "name",
"key": "input_1679559030288",
"rules": [
{
"required": true,
"message": "姓名不能为空",
"trigger": [
"blur"
]
}
]
},
{
"type": "textarea",
"options": {
"defaultValue": "",
"rows": 4,
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"autosize": false,
"hidden": false,
"disabled": false
},
"label": "地址",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "address",
"key": "textarea_1679559030288",
"rules": [
{
"required": true,
"message": "地址不能为空",
"trigger": [
"blur"
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 100,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
}
}
},
methods: {
dataFormValidator() {
this.$refs.formBuild.validate((valid)=> {
console.log('valid' , valid)
this.$message('效验结果:' + valid)
})
}
}
}
</script>
```
### 1.5 获取填报数据
获取填报数据使用getData 方法，当入参为true时（默认true），直接返回当前表单的填报json，当入参为false时，返回promise，resolve中返回表单的填报json。
示例：
```
<template>
<div style="padding: 20px;">
<ng-form-build ref="formBuild" :formTemplate="form" />
<div style="text-align: center;">
<el-button type="primary" size="mini" @click="dataFormData1()">直接获取数据</el-button>
<el-button type="primary" size="mini" @click="dataFormData2()">效验后获取数据</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"prepend": "",
"append": "",
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "名称",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "name",
"key": "input_1679559030288",
"rules": [
{
"required": true,
"message": "姓名不能为空",
"trigger": [
"blur"
]
}
]
},
{
"type": "textarea",
"options": {
"defaultValue": "",
"rows": 4,
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"autosize": false,
"hidden": false,
"disabled": false
},
"label": "地址",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "address",
"key": "textarea_1679559030288",
"rules": [
{
"required": true,
"message": "地址不能为空",
"trigger": [
"blur"
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 100,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
}
}
},
methods: {
dataFormData1() {
const data = this.$refs.formBuild.getData()
this.$message('获取到数据:' + JSON.stringify(data))
},
dataFormData2() {
this.$refs.formBuild.getData(false).then((data)=> {
this.$message('晓燕后获取到数据:' + JSON.stringify(data))
}).catch(()=> {
this.$message('效验未通过' )
})
}
}
}
</script>
```
## 2、 表单查看
表单查看使用ng-form-build组件并传递preview=true即可。
### 2.1 基础用法
```
<template>
<div style="padding: 20px;">
<ng-form-build ref="formBuild" :preview="true" :models="models" :formTemplate="form" />
</div>
</template>
<script>
export default {
data() {
return {
form: {
"list": [
{
"type": "input",
"options": {
"defaultValue": "",
"prepend": "",
"append": "",
"placeholder": "请输入",
"maxLength": 0,
"clearable": false,
"hidden": false,
"disabled": false
},
"label": "姓名",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "name",
"key": "input_1679557329971",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 100,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
},
// 标记历史数据
models: {
name: '小明'
}
}
},
methods: {
dataFormSubmit() {
const models = this.$refs.formBuild.getData(false)
console.log('表单提交:' , JSON.stringify(models))
}
}
}
</script>
```
## 3、 方法:
| 方法名称 | 参数| 返回结果 | 说明 |
|-----------|--------|-------|-------------------------|
| reset | N/A | N/A |重置动态表单内容|
| validate| N/A| Promise | 根据设置的规则验证当前表单内容,返回Promise|
| getData | boolean | Promise/JSON |表单验证后,获取当前表单数据，当入参为false时返回Promise |
## 4、 属性:
| 属性名 | 说明 | 格式| 默认值 |
|-----------|------------------------------|--------|----------|
| formTemplate | 表单模板 | json | 无 |
| models | 表单填充数据 | json | 无 |
| disabled | 是否禁用 | boolean | false |
| renderPreview | 当前是否为预览模式-废弃 | boolean | false |
| preview | 当前是否为预览模式 | boolean | false |
| config|表单的一些基础配置，主要为http的一些参数,譬如在http请求中给header增加参数：config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }| object | N/A |
| customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A |