foreword
This article mainly records the problems encountered by individuals in the company's project development, the ant-design component FormModel form (supports v-model inspection).
If the article is ambiguous, please point it out to avoid misleading more people! !
text
In daily project development, I will encounter the modification and submission of form information; when I use the component FormModel form (supporting v-model inspection) of ant-design-vue UI, the object bound to the form will appear under the two-way binding The field for does not exist!
form form code
<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>
Two-way binding object definition: the parameterEditForm class object has been defined
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' }
]
}
}
}
}
Error message: TypeError: Cannot read properties of undefined (reading 'functionCode')
Cause Analysis
Personal analysis: ant-design's FormModel form two-way binding form only supports field binding under the object class level; when there is subclass nesting, it cannot be directly bound, for example:
v-model="parameterEditForm.function.functionCode"
If you want to bind the field functionCode of the subclass of the parameterEditForm class, an error will be reported!
Solution : If there are subclasses under the object class, manually initialize the definition!
data () {
return {
parameterEditForm: {
function: {
}
}
}
}
Other cases
This kind of problem also occurs when the class to be bound has a list of collections:
v-model="parameterEditForm.function[0].name"
data () {
return {
parameterEditForm: {
function: [{
}]
}
}
}
When the form data is too complex, we must be careful when using ant-design's FormModel form to bind data two-way!