dynamic adding/removing form item error

[asbeyas]

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

Version

1.3.2

Environment

Win10 x64, Chrome 71, IE 11, Vue 2.5.22

Reproduction link

Steps to reproduce

Pressing "Add field" button 3 times and the error shown in console, then you are unable to add or remove a form item. You can do nothing with it before refreshing the page.

What is expected?

the example work like a charm

What is actually happening?

the example cannot work properly

---

https://vuecomponent.github.io/ant-design-vue/components/form-cn/#components-form-demo-customized-form-controls

The demo in home page also has this problem.

It works great in 1.1.10 for sure. I came across the same error after I upgrade to version 1.3.2 in my project

[tangjinzhou]

https://codesandbox.io/s/1yzkwz19qq
Each time the component is updated, it clears items that are no longer in use.
The key is registered by the method. After the component is updated, it does not know if the keys are still needed. So the keys are cleared.
There are two ways to solve this problem:

1. Add reserve to true, forcibly not cleared
   this.form.getFieldDecorator("keys", { initialValue: [], preserve: true });
2. Re-register the keys before update

beforeUpdate(){
    this.form.getFieldDecorator("keys", { initialValue: [] });
}

[asbeyas]

Thanks for your reply! The first solution indeed helped me, but I still have a few questions about it:)

Each time the component is updated, it clears items that are no longer in use.

I try to downgrade to version 1.3.0 and run with old code and everything works fine, but version 1.3.1 failed.
So I take a glance on the release notes, is this a new bug fix in version 1.3.1? 0f7d778 #367

Actually I used to remove these "useless" items in the callback of validateFields manually, because I think this is a feature rather than a bug:) So it seems like I have to double check my project.

2. The first solution

this.form.getFieldDecorator("keys", { initialValue: [], preserve: true });

From API doc https://vuecomponent.github.io/ant-design-vue/components/form/#API , I can't find any "preserve" word in doc page, so I really didn't know it before your reply. Could you please update the doc? Thanks again!

[tangjinzhou]

Versions prior to 1.3.0 did not clean up items that were no longer used, and it was a bug.
If you use JSX, it was also cleared before 1.3.0.
Just in JSX, we generally put getFieldDecorator in the render, each time the render will be re-registered, so there is no need to pay special attention to the problem of cleanup.

The document does not specify this option, which will be supplemented later.

[asbeyas]

Thanks for your explanation! I haven't used JSX yet, but I would try it later.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.