Ant-design-vue: this.form.setFieldsValue报错You cannot set a form field before rendering a field associated with the value.

Created on 23 Apr 2019 · 9Comments · Source: vueComponent/ant-design-vue

[ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.3.8

Environment

vue

Reproduction link

https://codesandbox.io/s/l5qx1mjxlz

Steps to reproduce

<a-form :form="form">
                <a-form-item v-bind="formItemLayout" label="名称">
                    <a-input
                        v-decorator="['name', {rules: [{ required: true, message: '请输入标题' }]}]"
                        name="name"
                        placeholder="给目标起个名字" />
                </a-form-item>
            </a-form>




toEdit(data) {
            let formData = { // 这样直接给默认值不可以
                name: 11
            }
            this.form.setFieldsValue({
                ...formData, // 直接使用...data也不可以
            })
            this.visible = true
        },

What is expected?

可以正常回填数据

What is actually happening?

可以正常回填数据

Source

YingZzz

Most helpful comment

正确结果例子： https://codesandbox.io/s/0y7736z2ln

有两个问题

modal 还没渲染，就设置 modal 子元素 form 的值， form 会找不到
点击编辑时，给 form 设置了 form 不存在的值

附：单页使用 modal ，没必要销毁 modal 浪费性能

sendya on 23 Apr 2019

👍10 😄2

All 9 comments

复现地址已加...

YingZzz on 23 Apr 2019

正确结果例子： https://codesandbox.io/s/0y7736z2ln

有两个问题

modal 还没渲染，就设置 modal 子元素 form 的值， form 会找不到
点击编辑时，给 form 设置了 form 不存在的值

附：单页使用 modal ，没必要销毁 modal 浪费性能

sendya on 23 Apr 2019

👍10 😄2

正确结果例子： https://codesandbox.io/s/0y7736z2ln

有两个问题

modal 还没渲染，就设置 modal 子元素 form 的值， form 会找不到

点击编辑时，给 form 设置了 form 不存在的值

附：单页使用 modal ，没必要销毁 modal 浪费性能

thankyou!

YingZzz on 23 Apr 2019

设置不存在的值也会报错，不太懂官方的设计理念

qiaozhi520 on 10 Dec 2019

👍8

其中一个情况：没有使用 <a-form-item>标签包裹给表单标签给了我致命的坑

nongzhenli on 15 Jan 2020

设置不存在的值也会报错，不太懂官方的设计理念

的确是很坑，我用下面的方式才消除这个告警：

const { form: { getFieldsValue, setFieldsValue, resetFields } } = this

this.$nextTick(() => {
    const values = getFieldsValue()
    Object.keys(values).forEach((k) => {
        values[k] = data[k]
    })

    resetFields()
    setFieldsValue(values)
})