Menu
I am using antd template for form design. After submit form input values are not getting cleared.
I tried this.props.form.resetFields() its not working getting following error
Unhandled Rejection (TypeError): Cannot read property 'resetFields' of undefined
codesandbox.io/s/funny-wright-oyd72?file=/src/App.js
import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';
import {
Form,
Input, Layout,
Divider,
Tooltip,
Cascader,
Select,
Row,
Col,
Checkbox,
Button,
AutoComplete, InputNumber, DatePicker,
} from 'antd';
import axios from 'axios';
import { withRouter } from "react-router-dom";
import moment from 'moment';
import { QuestionCircleOutlined } from '@ant-design/icons';
import countries from './countrys.json'
import SweetAlert from 'sweetalert-react';
import 'sweetalert/dist/sweetalert.css';
const { TextArea } = Input;
const { Option } = Select;
const { Header, Content } = Layout;
const {form} = Form
class Registration extends Component {
constructor(props) {
super(props);
this.state = {
customerName: "",
username: "",
password: "",
address: "",
country: "",
state: "",
email: "",
contactNumber: null,
dob: "",
customerAge: null,
citizenStatus: "",
accountType: "",
branchName: "",
initDepositAmount: null,
initProofType: "",
initDocumentNo: "",
stateList: []
}
}
// handle change text
handleChangeText = (value, name) => {
this.setState({ [name]: value }, () => {
if (name == 'dob') {
this.handleChange_age(value)
}
})
}
handleChangeCountry = (countryName) => {
let countrList = countries.countries;
let countryObject = countrList.find(k => k.country == countryName);
this.setState({
...this.state,
stateList: countryObject.states,
country: countryName
})
}
//submit form
submitForm = () => {
const { stateList, ...withoutStateList } = this.state;
axios({
method: 'post',
url: 'http://localhost:3333/registration',
data: withoutStateList
}).then(response => {
this.setState({
show: true
});
// this.props.form.resetFields();
})
}
// Cancel form
navigateToLogin = () => {
this.props.history.push({ pathname: '/login' })
}
//Check age and Citizen status
handleChange_age = (dob) => {
let currentAge = Math.abs((moment().year()) - (moment(dob, "DD/MM/YYYY").year()));
let statusOfcitizen = null;
if (currentAge < 18) {
statusOfcitizen = "Minor";
} else if (currentAge > 18 && currentAge <= 60) {
statusOfcitizen = "Normal";
} else if (currentAge > 60) {
statusOfcitizen = "Senior";
}
this.setState({
...this.state,
customerAge: currentAge,
citizenStatus: statusOfcitizen
})
}
render() {
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 9 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 6 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: { span: 24, offset: 0, },
sm: { span: 21, offset: 0, },
},
};
function disabledDate(current) {
return current && current > moment().endOf('day');
}
return (
<div>
<Divider>New Registration</Divider>
<Form
{...formItemLayout}
name="register"
scrollToFirstError
onFinish={() => this.submitForm()}
ref={this.formRef}
>
<Form.Item
name="customerName"
label="Name"
rules={[
{
required: true,
message: 'Please input your name!',
whitespace: true
}, {
pattern: /^([a-z]+\s)*[a-z]+$/,
message: 'Please input alphabets only!',
}
]}
>
<Input onChange={e => this.handleChangeText(e.target.value, "customerName")} />
</Form.Item>
<Form.Item
name="username"
label="Username"
rules={[
{
required: true,
message: 'Please input your username!',
whitespace: true,
},
]}
>
<Input onChange={e => this.handleChangeText(e.target.value, "username")} />
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password onChange={e => this.handleChangeText(e.target.value, "password")} />
</Form.Item>
<Form.Item
name="address"
label="Address"
rules={[
{
required: true,
message: 'Please input your Address!',
whitespace: true,
},
]}
>
<TextArea onChange={e => this.handleChangeText(e.target.value, "address")} />
</Form.Item>
<Form.Item
name="country"
label="Country"
rules={[
{
required: true,
message: 'Please input your Country!'
},
]}
>
<Select
showSearch
placeholder="Select a country"
optionFilterProp="children"
onChange={e => this.handleChangeCountry(e)}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{
countries.countries.map((cname, i) => {
return (
<Option value={cname.country} key={i}>{cname.country}</Option>
)
})
}
</Select>
</Form.Item>
<Form.Item
name="state"
label="State"
rules={[
{
required: true,
message: 'Please input your State!'
},
]}
>
<Select
showSearch
placeholder="Select a state"
optionFilterProp="children"
onChange={e => this.handleChangeText(e, "state")}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{
this.state.stateList.map((sname, i) => {
return (
<Option value={sname} key={i}>{sname}</Option>
)
})
}
</Select>
</Form.Item>
<Form.Item
name="email"
label="E-mail"
rules={[
{
type: 'email',
message: 'The input is not valid E-mail!',
},
{
required: true,
message: 'Please input your E-mail!',
},
]}
>
<Input onChange={e => this.handleChangeText(e.target.value, "email")} />
</Form.Item>
<Form.Item
name="contactNumber"
label="Contact Number"
// validateStatus={this.state.validateStatus}
// help={this.state.errorMsg}
rules={[
{
required: true,
message: 'Please input your contact number!',
type: 'number'
},
{
pattern: /^[2-9]{2}[0-9]{8}$/,
message: 'Please input valid contact number!',
}
]}
>
<InputNumber
min={0}
style={{ width: '100%' }}
onChange={e => this.handleChangeText(e, "contactNumber")}
/>
</Form.Item>
<Form.Item
name="dob"
label="Date Of Birth"
rules={[
{
required: true,
message: 'Please input your date of birth!'
},
]}
>
<DatePicker
format="DD/MM/YYYY"
disabledDate={disabledDate}
style={{ width: '100%' }}
onChange={e =>
this.handleChangeText(moment(e).format("DD/MM/YYYY"), "dob")
}
/>
</Form.Item>
<Form.Item
name="currentAge"
label="Your age is"
>
<Input value={this.state.customerAge} disabled />
<span></span>
</Form.Item>
<Form.Item
name="citizenStatus"
label="Citizen Status"
>
<Input value={this.state.citizenStatus} disabled />
<span></span>
</Form.Item>
<Form.Item
name="accountType"
label="Account Type"
rules={[
{
required: true,
message: 'Please input your account type!'
},
]}
>
<Select
showSearch
placeholder="Select a account type"
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
onChange={e => this.handleChangeText(e, "accountType")}
>
<Option value="salary">Salary</Option>
<Option value="saving">Saving</Option>
</Select>
</Form.Item>
<Form.Item
name="branchName"
label="Branch Name"
rules={[
{
required: true,
message: 'Please input your branch name!',
whitespace: true,
},
]}
>
<Input onChange={e => this.handleChangeText(e.target.value, "branchName")} />
</Form.Item>
<Form.Item
name="initDepositAmount"
label="Initial Deposit Amount"
rules={[
{
required: true,
message: 'Please input your Initial Deposit Amount!'
},
]}
>
<InputNumber
min={1}
style={{ width: '100%' }}
onChange={e => this.handleChangeText(e, "initDepositAmount")}
/>
</Form.Item>
<Form.Item
name="initProofType"
label="Identiication Proof Type"
rules={[
{
required: true,
message: 'Please input your Identiication Proof Type!',
whitespace: true,
},
]}
>
<Input onChange={e => this.handleChangeText(e.target.value, "initProofType")} />
</Form.Item>
<Form.Item
name="initDocumentNo"
label="Identiication Document No"
rules={[
{
required: true,
message: 'Please input your Identiication Document No!',
whitespace: true,
},
]}
>
<Input onChange={e => this.handleChangeText(e.target.value, "initDocumentNo")} />
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">
Register
</Button>
<Button type="default" style={{ margin: '0 8px' }} onClick={this.navigateToLogin}>
Cancel
</Button>
</Form.Item>
</Form>
<SweetAlert
show={this.state.show}
title="Done"
text="Registered Successfully"
success
onConfirm={() => this.setState({ show: false })}
/>
</div>
);
}
}
Registration.propTypes = {
};
export default withRouter(Registration);
997
To clear input values after form submit in React: Store the values of the input fields in state variables. Set the onSubmit prop on the form element. When the submit button is clicked, set the state variables to empty strings.
To clear all form fields after submitting:Add a submit event listener on the form element. When the form is submitted, call the reset() method on the form. The reset method restores the values of the input fields to their default state.
To clear an input field with React, we can set the value of the value attribute to an empty string. We create the val state with the useState hook. Then we set the value prop of the input to the val state. Next we set the onClick prop of the button to a function that calls setVal to an empty string.
First thing you don't need to use this.props. As you are importing like this. If you still need in form of props you need to Form.create api of ant. form is nothing exported from Form api. The better way is you already defined ref. Access form value via that:
formRef = React.createRef();
<Form
{...formItemLayout}
name="register"
scrollToFirstError
onFinish={() => this.submitForm()}
ref={this.formRef}
>
//submit form
submitForm = () => {
console.log("Form submitted:", this.formRef, Form);
this.formRef.current.resetFields();
};
Updated sandbox link:
https://codesandbox.io/s/admiring-noether-71cnt?file=/src/App.js:1302-1439
102
answered Sep 17 '22 16:09
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