Ant Design says I can't use defaultValue
if I wrapped it with Form.Item
with name
.
https://ant.design/components/form/
After wrapped by Form.Item with name property, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls, the flow of form data will be handled by Form which will cause:
You shouldn't use onChange on each form control to collect data(use onValuesChange of Form), but you can still listen to onChange.
You cannot set value for each form control via value or defaultValue prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamiclly, you should use setFieldsValue in that situation.
So I set initialValues
to Form
component and I got this error when I use Form with DatePicker.
moment.js:93 Uncaught TypeError: date.clone is not a function
at Object.format (moment.js:93)
at useValueTexts.js:13
at Array.map (<anonymous>)
at useValueTexts.js:12
at useMemo (useMemo.js:6)
at useValueTexts (useValueTexts.js:7)
at InnerPicker (Picker.js:158)
at renderWithHooks (react-dom.development.js:14803)
at mountIndeterminateComponent (react-dom.development.js:17482)
at beginWork (react-dom.development.js:18596)
My code is like this.worker
object has a dateOfBirth
which is ISOString.
const dateFormat = 'YYYY/MM/DD';
return (
<Form
layout="vertical"
hideRequiredMark
onFinish={values => onFinish(values)}
initialValues={worker}
>
<Form.Item
label="Date Of Birth"
name="dateOfBirth"
>
<DatePicker format={dateFormat} />
</Form.Item>
</Form>
);
How can I get and use default value of worker's dateOfBirth?
Thank you.
The initialValue
of the DatePicker
component must be a moment
object. You will need to convert dateOfBirth
field on the worker
object from an ISOString to a moment object as illustrated below:
const dateFormat = "YYYY/MM/DD";
const worker = {
dateOfBirth: moment('2020-06-09T12:40:14+0000')
};
ReactDOM.render(
<Form
layout="vertical"
hideRequiredMark
onFinish={values => onFinish(values)}
initialValues={worker}
>
<Form.Item label="Date Of Birth" name="dateOfBirth">
<DatePicker format={dateFormat} />
</Form.Item>
</Form>,
document.getElementById("container")
);
CodeSandbox Link:
https://codesandbox.io/s/antdesign-setting-initialvalue-on-datepicker-inside-form-ypi4u?file=/index.js:239-652
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With