报错信息##
Warning: getFieldDecorator
will override value
, so please don’t set value and v-model
directly and use setFieldsValue
to set it.
使用场景##
在项目开发中,需要ant库自带的表单验证,但是input输入框的value属性又需要使用的情况下
报错原因##
官方解释
解决方法##
可以按照警告提示的方法将表单项的value属性在标签上去掉,用ant库form组件的设置表单值的setFieldsValue()方法来动态监听vue中表单项值的变化
我的示例代码##
html:
<a-select
readOnly
:value="partybvalue"
id="addpartyboptions"
mode="multiple"
:options="partyboptions"
style="width: 100%"
placeholder="双击选择签署方"
@change="handleChange1"
@search='setSelectPartyb'
:dropdownRender="null"
v-decorator="[
'selectPartyb',
{ rules: [{ required: true ,message:'请至少选择一个签署方'}] },
]"
/>
js:
this.partybvalue.push(...value)
//动态给签署方表单赋值
this.form.setFieldsValue({
'selectPartyb':_this.partybvalue
})
就这样,就可以解决表单验证前面的*号与表单项的value属性冲突的问题了。
还有比较复杂的思路 可以用添加样式的方法加上定位给表单标签前方模拟出一个* ,然后自定义一个表单验证规则,通过js原生事件来触发验证表单内容是否符合要求。