Input / select value not set when a-form-item in child component #446
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
1.3.3
Environment
Mac OS X 10.13, Firefox / Chome
Reproduction link
Steps to reproduce
- Define a form using the new v-decorator API
- Inside the form, reference a child component that defines
a-form-items.
That is, the component structure looks like:
<a-form :form="form">
<ChildComponent />
</a-form>
ChildComponent looks like:
<div>
<a-form-item>
<a-select v-decorator="['name']" :options="..." />
</a-form-item>
</div>
There's a full reproduction with CodeSandbox.
What is expected?
If you select a value from the a-select, that value renders correctly.
What is actually happening?
Selecting the a-select does not render the value.
Inspecting the a-select with vue-devtools shows that value == undefined.
Interestingly, if you submit the form, the value from a-select does appear in values after calling form.validateFields.
Old API
This behaviour worked correctly with the old fieldDecoratorId and fieldDecoratorOptions API. That's also shown in the reproduction.
Background
We use this technique of nesting a-form-items in child components to support a UI where there are different parameters required depending on the initial type someone selects. e.g.,
Select Role (options = [Employee, Manager])
If the user picks "Employee", we want things like name, date of birth, etc.
If they select "Manager", we want a very different set of parameters.
We model this as a component for each set of custom arguments.