前言
本篇文章主要记录个人在公司项目开发中，ant-design 组件 FormModel 表单 (支持 v-model 检验)所遇到的问题。
如果文章有歧义，请各位大佬指出，避免误导更多的人！！
正文
在日常项目开发中会遇到表单信息的修改提交；本人在使用ant-design-vue UI 的组件FormModel 表单 (支持 v-model 检验)时，双向绑定时会出现表单所绑定的对象下的字段不存在！
form 表单代码
<a-form-model :form="form" :model="parameterEditForm" ref="ruleForm" :rules="rules">
<a-row :gutter="16">
<a-col :span="11">
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="parameterName"
label="参数名称"
>
<a-input
placeholder="请输入"
id="parameterName"
v-model="parameterEditForm.parameterName"
/>
</a-form-model-item>
</a-col>
<a-col :span="11" >
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="功能码"
>
<a-input
placeholder="请输入"
id="functionCode"
v-model="parameterEditForm.function.functionCode"
/>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="11" :offset="1">
<a-button type="primary" style="margin-left:20px;">
提交
</a-button>
<a-button style="margin-left:10px;">
重置
</a-button>
</a-col>
</a-row>
</a-form-model>
双向绑定对象定义：parameterEditForm类对象已经定义
export default {
name: 'TestDemo',
data () {
return {
form: this.$form.createForm(this),
labelCol: {
xs: {
span: 24 },
sm: {
span: 6 }
},
wrapperCol: {
xs: {
span: 24 },
sm: {
span: 16 }
},
parameterEditForm: {
},
rules: {
parameterName: [
{
required: true, message: '请输入参数名称', trigger: 'blur' },
{
min: 1, max: 32, message: '字符长度应在1-32之间', trigger: 'change' }
]
}
}
}
}
报错信息：TypeError: Cannot read properties of undefined (reading ‘functionCode’)
原因分析
个人分析：ant-design 的 FormModel 表单双向绑定表单只支持对象类一层级下的字段绑定；当出现子类嵌套时则无法直接绑定，例：
v-model="parameterEditForm.function.functionCode"
想要绑定parameterEditForm类下子类的字段functionCode，就会引发报错！
解决方式：若对象类下有子类，要手动初始化定义上！
data () {
return {
parameterEditForm: {
function: {
}
}
}
}
其他情况
当要绑定的类有集合列表时也会出现此类问题：
v-model="parameterEditForm.function[0].name"
data () {
return {
parameterEditForm: {
function: [{
}]
}
}
}
当表单数据过为复杂时，我们使用ant-design 的 FormModel 表单双向绑定数据时要格外小心！