组件

ng-form对外主要暴漏 表单配置(ng-form-design)和表单填写/回显(ng-form-build)两个组件。

1、表单配置组件

表单配置组件ng-form-design包含组件列表、绘制面板、属性面板三部分，将组件拖拽至绘制面板后，通过属性配置，最终得到一个动态表单json数据。

基础用法

直接通过标签 ng-form-design 来使用即可。例如：

<template>
    <div> 
        <ng-form-design />
    </div> 
</template>
<script>
    export default { 
    }
</script>

方法

方法名称	参数	返回值	说明
initModel	json	N/A	初始化动态表单内容，参数为动态表单json模板
getModel	N/A	json	返回当前正在编辑得动态表单信息

属性

属性名	说明	格式	默认值
custom-components	自定义组件的配置数组	array	N/A
config	表单的一些基础配置，目前为http请求配置和数据字典	object	N/A
clear	是否显示面板上清除按钮	boolean	true
preview	是否显示面板上预览按钮	boolean	true
imp	是否显示面板上导入按钮	boolean	true
exp	是否显示面板上导出按钮	boolean	true
basic-item	基础组件是否要展示或待选组件列表集合	boolean/Array	true
decorate-item	个性化组件是否要展示或待选组件列表集合	boolean/Array	true
layout-item	布局组件是否要展示或待选组件列表集合	boolean/Array	true
application-item	应用组件是否要展示或待选组件列表集合	boolean/Array	true

插槽

插槽名称	说明
drag	左侧组件面板插槽，可以在组件面板上面填充一个区域展示内容
form-name	当前动态表单名称 (ng-form-element废弃)
control-button	功能区按钮,如果需要自定义功能按钮可以在这里自定义

插槽示例:

<template>
    <ng-form-design :clear="false" :preview="false" :reder="false" :imp="false" :exp="false">
        <template slot="controlButton" >
            <el-button   type="text" size="mini" >示例1</el-button>
            <el-button   type="text" size="mini" >示例2</el-button>
            <el-button   type="text" size="mini" >示例3</el-button>
        </template>
        <template  slot="formName">
            <span> ng-form-element 示例 </span>
        </template>
    </ng-form-design> 
</template>
<script>
    export default {

    }
</script>

2、表单填报/回显组件

表单渲染器提供根据配置好的表单进行填报页面绘制和基于配置的表单和填报的数据进行展示的两大功能。

方法

方法名称	参数	返回结果	说明
reset	N/A	N/A	重置动态表单内容
validate	N/A	Promise	根据设置的规则验证当前表单内容,返回Promise
getData	boolean	Promise/JSON	表单验证后,获取当前表单数据，当入参为false时返回Promise

属性

属性名	说明	格式	默认值
form-template	表单模板	json	无
models	表单填充数据	json	无
disabled	是否禁用	boolean	false
render-preview	当前是否为预览模式-废弃	boolean	false
preview	当前是否为预览模式	boolean	false
config	表单的一些基础配置，目前为http请求配置和数据字典	object	N/A
custom-components	自定义组件的配置,具体参加最下方自定义组件示例中的格式	array	N/A

表单填报

基础用法

使用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: {} // 表单配置json
    	}
    },
    methods: {
    	dataFormSubmit() {
    		// 获取表单填报数据 
    		const models = this.$refs.formBuild.getData(false)

    		console.log('表单提交:' , JSON.stringify(models))
    	}
    }
}

表单效验

表单在填写时默认触发为 失去焦点和数据改变触发，有些场景下需要我们手动效验整个表单，此时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: {} // 表单配置json
    	}
    },
    methods: {
    	dataFormValidator() {
    		this.$refs.formBuild.validate((valid)=> {
    			console.log('valid' , valid)
    			this.$message('效验结果:' + valid)
    		})
    	}
    }
}
</script>

填报数据获取

获取填报数据使用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: {} // 表单配置json
    	}
    },
    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>

表单查看

表单查看使用ng-form-build组件并传递preview=true即可。

<template>
    <div style="padding: 20px;"> 
        <ng-form-build ref="formBuild" :preview="true" :models="models"  :formTemplate="form" />
    </div> 
</template>
<script>
export default { 
   	data() {
    	return {
    		form: {} ,// 表单模板json
    		models: {} // 表单填报的数据json
    	}
    }
}
</script>