# 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 |