How to integrate redux with antd form validation - reactjs

Question

I'm validating an email field with react-js, antd, and redux, my problem is why does the loading icon disappeared in the input when i integrated redux(created-form.js) but when i remove redux integration, the loading icon is working fine, am i missing something here, or doing something not right?
base-form.js
...
// Constructor
constructor() {
super();
this._validateEmail = _.debounce(this._validateEmail, 1000);
}
// Private method
_validateEmail = (rule, email, callback) => {
const url = 'http://localhost:8000/api/user/isExist';
axios
.post(url, { email })
.then(res => {
if (res.data.isExist) {
callback('Email is already exist');
}
callback();
})
.catch(res => console.log(res));
};
// Render
<Form.Item hasFeedback>
{getFieldDecorator('email', {
rules: [...rules.email, { validator: this._validateEmail }]
})(<Input placeholder="Email" />)}
</Form.Item>
...
created-form.js
import { Form } from 'antd';
import AccSetupForm from './base-form';
function mapPropsToFields(props) {
return {
email: Form.createFormField({
value: props.email
}),
password: Form.createFormField({
value: props.password
}),
confirm_pass: Form.createFormField({
value: props.confirm_pass
})
};
}
function onFieldsChange(props, changedField) {
const field = Object.values(changedField)[0];
if (field !== undefined) {
props.updateAccSetup({
[field.name]: field.value
});
}
}
const CreatedForm = Form.create({ mapPropsToFields, onFieldsChange })(
AccSetupForm
);
export default CreatedForm;
index.js
import { connect } from 'react-redux';
import { updateAccSetup } from '../actions';
import CreatedForm from './created-form';
function mapStateToProps(state) {
return {
email: state.getIn(['registration', 'user', 'email']),
password: state.getIn(['registration', 'user', 'password']),
confirm_pass: state.getIn(['registration', 'user', 'confirm_pass'])
};
}
function mapDispatchToProps(dispatch) {
return {
updateAccSetup: userInfo => dispatch(updateAccSetup(userInfo))
};
}
const StepOne = connect(
mapStateToProps,
mapDispatchToProps
)(CreatedForm);
export default StepOne;

Answer 1

I found the problem, i forgot to add ...props.username inside form.createFormField
/* Antd Docu */
mapPropsToFields(props) {
return {
username: Form.createFormField({
...props.username,
value: props.username.value,
}),
};
},
here are some reference:
https://github.com/ant-design/ant-design/issues/9561
https://ant.design/components/form/#components-form-demo-global-state