I am using ant-design library. There is useForm() hook to reset values.
All values are being reset to original values but not for Radio.Group.
How do I reset my radio button state to priority value from State?
const [priority, setPriority] = useState(2);
const [form] = Form.useForm();
const onSubmit = (values) => {
console.log('Received values of form: ', values);
form.resetFields();
}
<Form
form={form}
labelCol={{ span: 4 }}
wrapperCol={{ span: 14 }}
layout="horizontal"
initialValues={{ size: "large" }}
size={"large"}
onFinish={onSubmit}
>
<Form.Item
name="title"
rules={[{ required: true, message: 'Title is required!' }]}
label="Title">
<Input placeholder="Title" />
</Form.Item>
<Form.Item
name="content"
rules={[{ required: true, message: 'Content is required!' }]}
label="Content">
<Input.TextArea placeholder="Content" />
</Form.Item>
<Form.Item label="Switch" name="switch">
<Switch />
</Form.Item>
<Form.Item name="priority" label="Radio.Button">
<Radio.Group defaultValue={priority}
onChange={onPriorityChange}>
<Radio.Button value={2}>High</Radio.Button>
<Radio.Button value={1}>Medium</Radio.Button>
<Radio.Button value={0}>Low</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
I added priority to the initialValues and it worked.
Refer this.
https://codesandbox.io/s/elegant-agnesi-9vp4x?file=/src/App.js
Related
Why the rules are not working? i am using antd inputs, now i want to validate the fields, what thing i need to do to use the rules for the inputs?
<Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}
autoComplete="off">
<Form.Item className="form-item" label={'name'} rules={[
{
required: true,
message: 'Please input your name!',
},
]}>
<Input name='name' />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
submit
</Button>
</Form.Item>
</Form>
i want to validate if 'name' just have letters not numbers, how can i do that?
Try this:
<Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}
autoComplete="off">
<Form.Item className="form-item" label={'name'}
rules={[
{
pattern: new RegExp(/^[a-zA-Z]*$/),
message: 'No Numbers Allowed'
},
{
required: true,
message: 'Please input your name!',
}
]}>
<Input name='name' />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
submit
</Button>
</Form.Item>
</Form>;
I'm submitting a form to send data to my API that receives date in the format of YYYY-MM-DD but by default the DatePicker component keeps adding extra characters of time to the end of the date, for example when I enter a date for my date of birth field the value is stored in the format below
{
"date_of_birth":"2003-02-03T13:32:49.543Z"
}
I would prefer it to be just
{
"date_of_birth":"2003-02-03"
}
below is the code for the form and its submit function
const Demo = () => {
const [visible, setVisible] = useState(false);
const [form] = Form.useForm();
const showUserModal = () => {
setVisible(true);
};
const hideUserModal = () => {
setVisible(false);
};
const onFinish = values => {
console.log(JSON.stringify(values))
const userToken = localStorage.getItem(AUTH_TOKEN)
IndividualService.setToken(userToken)
IndividualService.postIndividual(values).then(resp => {
console.log(resp)
message.success('successfully added details for Individual plan')
}).catch(error => {
message.error('Error occured, plase try again', error.message)
})
};
const customFormat = value => `custom format: ${value.format("YYYY-MM-DD")}`;
return (
<Card title='Enter Customer details for individual plan'>
<Row justify='center'>
<Col span={20}>
<Form.Provider
onFormFinish={(name, { values, forms }) => {
if (name === 'userForm') {
const { basicForm } = forms;
const dependants = basicForm.getFieldValue('dependants') || [];
basicForm.setFieldsValue({
dependants: [...dependants],
...values
});
setVisible(false);
}
}}
>
<Form {...layout} name="basicForm" onFinish={onFinish} size='small'>
<Form.Item
name="first_name"
label="First Name"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="other_names"
label="Other Names"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="gender"
label="Gender"
rules={[
{
required: true,
},
]}
>
<Select>
<Option value="MALE">male</Option>
<Option value="FEMALE">female</Option>
</Select>
</Form.Item>
<Form.Item
name="date_of_birth"
label="Date of Birth"
rules={[
{
required: true,
},
]}
>
<DatePicker format={customFormat} />
</Form.Item>
<Form.Item
name="blood_group"
label="Blood Group"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="residential_address"
label="Residential address"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="workplace_address"
label="Workplace address"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="additional_telephone_no"
label="Additional phone no."
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="NIN"
label="NIN"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="next_of_kin_name"
label="Next of kin name"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="next_of_kin_telephone"
label="next of kin phone."
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="next_of_kin_email"
label="next of kin email."
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="dependants"
label="Dependants List"
shouldUpdate={(prevValues, curValues) => prevValues.dependants !== curValues.dependants}
>
{({ getFieldValue }) => {
const dependants = getFieldValue('dependants') || [];
return dependants.length ? (
<ul>
{dependants.map((d, index) => (
<li key={index} className="user">
<Avatar icon={<UserOutlined />} />
<p>{d.first_name} - {d.relationship}</p>
</li>
))}
</ul>
) : (
<Typography.Text className="ant-form-text" type="secondary">
( <SmileOutlined /> No dependant yet. )
</Typography.Text>
);
}}
</Form.Item>
<Form.Item {...tailLayout}>
<Button htmlType="submit" type="primary">
Submit
</Button>
<Button
htmlType="button"
style={{
marginLeft: 8,
}}
onClick={showUserModal}
>
Add User
</Button>
</Form.Item>
</Form>
<ModalForm visible={visible} onCancel={hideUserModal} />
</Form.Provider>
</Col>
</Row>
</Card>
);
};
You can add the prop format to get the input in custom format, as
<DatePicker
format="YYYY-MM-DD"
/>
This will display the date in the format YYYY-MM-DD in the date picker.
To convert this to the required format you may need to format it in the onFinish , as:
const onFinish = values => {
console.log(JSON.stringify(values))
const userToken = localStorage.getItem(AUTH_TOKEN)
IndividualService.setToken(userToken)
values["date_of_birth"] = moment(values.date_of_birth).format("YYYY-MM-DD")
IndividualService.postIndividual(values).then(resp => {
console.log(resp)
message.success('successfully added details for Individual plan')
}).catch(error => {
message.error('Error occured, plase try again', error.message)
})
};
I'm validating form with Ant Design but I have a problem with getFieldError(). I need to get the error messages by the field name of Form.Item but it not works.
Here's my code not works below:
...
<Form form={form} name="login_form" onFinish={onFinish} scrollToFirstError>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Password cannot be empty!',
},
]}
help='' // hide validating message.
>
<>
{({ getFieldError }) => console.log(getFieldError('password'))}
//it not logging anything when submit form trigger error
<Input.Password placeholder="Enter your password" />
</>
</Form.Item>
</Form>
How can I solved this problem?
Your console.log will invoke, every time your component renders, so you need to rerender your component whenever validation applies on the form. To handle this situation you can use render prop with Form component, like this:
function CustomFormItem({ error, ...other }) {
console.log(error)
return <Input.Password placeholder="Enter your password" {...other} />;
}
function MyForm() {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log(values);
};
return (
<Form
form={form}
name="login_form"
onFinish={onFinish}
scrollToFirstError
>
{(values,formInstance) => {
return (
<>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Password cannot be empty!',
},
]}
help="" // hide validating message.
>
<CustomFormItem error={formInstance.getFieldError('password')} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</>
);
}}
</Form>
);
}
Consider that with above implementation, render prop will call with every change on the form.
Use can use getFieldError(); like the code example below
Function as Child Component is not working perfectly inside <Form.Item> component as of now.
<Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
{(values, formInstance) => {
console.log(formInstance.getFieldError("password")[0]);
return (
<>
<Form.Item
name="password"
label="Password"
rules={[
{
required: true
}
]}
>
<Input />
</Form.Item>
</>
);
}}
</Form>
I have a antd form that consists of input and checkboxes.
antd : 4.16.0
react : 17.0.2
After using,
this.formRef.current.resetFields();
the input fields are getting reset but not the checkboxes.
Sample Code:
<Form
layout="vertical"
hideRequiredMark
initialValues={{
sunH: [
moment("00:00", "HH:mm"),
moment("00:00", "HH:mm"),
],
monH: [
moment("00:00", "HH:mm"),
moment("00:00", "HH:mm"),
],
}}
ref={this.props.formRef}
>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="pName"
label="Name"
rules={[
{
required: true,
message: "Please enter Name",
},
]}
>
<Input placeholder="Enter name" />
</Form.Item>
<Form.Item name="Mon" label="" valuePropName="checked">
<Text>Mon</Text>
</Form.Item>
</Col>
</Row>
</Form>
the form takes in a onCancel props, so onCancel,
this.formRef.current.resetFields();
log of this.formRef.current:
you can manually set radio fields value null in that function ...
all you have to do is ...
formRef.setFieldsValue(['label_name(Mon)'] : undefined)
try formRef.current.setFieldsValue if you cant't change using upper code.
for functional component you have to take the form reference that is binding using useForm() and you have to call setfield method same.
form.setFieldsValue(['label_name(Mon)'] : undefined )
ant.design/components/form/#components-form-demo-nest-messages Check the second example, they have well explained everything you need there
https://codesandbox.io/s/form-methods-antd-4-17-0-alpha-7-forked-ff1uf?file=/index.js:0-2953
Check this working example with checkbox
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button, Select, Checkbox } from "antd";
const { Option } = Select;
const layout = {
labelCol: {
span: 8
},
wrapperCol: {
span: 16
}
};
const tailLayout = {
wrapperCol: {
offset: 8,
span: 16
}
};
const Demo = () => {
const [form] = Form.useForm();
const onGenderChange = (value) => {
switch (value) {
case "male":
form.setFieldsValue({
note: "Hi, man!"
});
return;
case "female":
form.setFieldsValue({
note: "Hi, lady!"
});
return;
case "other":
form.setFieldsValue({
note: "Hi there!"
});
}
};
const onFinish = (values) => {
console.log(values);
};
const onReset = () => {
form.resetFields();
};
const onFill = () => {
form.setFieldsValue({
note: "Hello world!",
gender: "male"
});
};
return (
<Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
<Form.Item
name="note"
label="Note"
rules={[
{
required: true
}
]}
>
<Input />
</Form.Item>
<Form.Item
name="gender"
label="Gender"
rules={[
{
required: true
}
]}
>
<Select
placeholder="Select a option and change input text above"
onChange={onGenderChange}
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.gender !== currentValues.gender
}
>
{({ getFieldValue }) =>
getFieldValue("gender") === "other" ? (
<Form.Item
name="customizeGender"
label="Customize Gender"
rules={[
{
required: true
}
]}
>
<Input />
</Form.Item>
) : null
}
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{
offset: 8,
span: 16
}}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button htmlType="button" onClick={onReset}>
Reset
</Button>
<Button type="link" htmlType="button" onClick={onFill}>
Fill form
</Button>
</Form.Item>
</Form>
);
};
I am using antd forms and rules and when im submiting a form i get warnings like:
async-validator: ["Please enter username"].
I tried { suppressWarning: true } but it didn't work, the warning is not the same text in the rule its the default template text
antd: ^4.6.4
<Form
{...layout}
name="basic"
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: 'Please input your username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
As described on the async-validator page (https://github.com/yiminghe/async-validator)
At the entry point to your app you can do the following to disable the warning messages.
import Schema from 'async-validator';
Schema.warning = function(){};
For antd >4.20.0, use the following line in the App.jsx, after last import instruction...
global.ASYNC_VALIDATOR_NO_WARNING = 1;