ReduxForm inside Modal - reactjs

Question

I use ReactJS and want to add reduxForm to modal.
For modal I use reactstrap library that represents bootstrap 4 for React.
For form validation I use reduxForm
I have tasked add form modal with validation fields and I did that:
render() {
const {handleSubmit, fields: {
email
}} = this.props;
const FormEmail = ({touched, error}) => {
if (touched && error)
return (
<div>
<Input type="email" name="email" id="email"/>
<div className="error">{error}</div>
</div>
);
return (<Input type="email" name="email" id="email"/>);
}
return (
<div>
<Col>
<Col xs={{
size: 9
}}>
<ReportSettings/>
</Col>
<Col xs={{
size: 3
}}>
<Button outline color="primary" onClick={this.toggle}>Share</Button>
</Col>
</Col>
<Form onSubmit={handleSubmit(this.toggle)}>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Share</ModalHeader>
<ModalBody>
<FormGroup row>
<CheckBoxInputField data={this.state.measurements} handleFieldChange={this.handleFieldChange}/>
</FormGroup>
<FormGroup row>
<Label for="email" xs={2}>Email</Label>
<Col xs={10}>
<FormEmail {...email}/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="message" xs={2}>Message</Label>
<Col xs={10}>
<Input type="textarea" name="message" id="message"/>
</Col>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button action="submit" color="primary" value={true}>OK</Button>
<Button color="secondary" onClick={this.toggle} value={false}>Cancel</Button>
</ModalFooter>
</Modal>
</Form>
</div>
);
}
my toggle function:
toggle(e) {
e.preventDefault();
this.setState({
modal: !this.state.modal
});
if (e.target.value === 'true') {
const measurementsID = this.state.measurements.values.filter((measurement) => {
return measurement.checked;
}).map((measurement) => {
return measurement.value;
});
this.props.onShare(MeasurementsToBitMap(measurementsID));
}
}
validation function:
function validate(formProps) {
const errors = {};
if (!formProps.email) {
errors.email = 'Please enter an email';
}
return errors;
}
finally I export Component:
export default reduxForm({form: 'form', fields: ['email'], validate})(HeadMeasurement);
When I click on cancel button the modal close it works good, but when I click on OK button
and fields aren't valid error messages aren't showed otherwise when fields are valid modal isn't disappeared.
My question is how to combine reduxForm and Modal work together?
Thanks, Michael.

Answer 1

reactstrap inserts your modal definition at the bottom of the rendered html doc so wrapping <Form> around <Modal> doesn't work. You have to have your inside the . In your case since you are doing a submit action you will want it wrapped around both your footer and the body tags.
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<Form onSubmit={handleSubmit(this.toggle)}>
<ModalHeader toggle={this.toggle}>Share</ModalHeader>
<ModalBody>
<FormGroup row>
<CheckBoxInputField data={this.state.measurements} handleFieldChange={this.handleFieldChange}/>
</FormGroup>
<FormGroup row>
<Label for="email" xs={2}>Email</Label>
<Col xs={10}>
<FormEmail {...email}/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="message" xs={2}>Message</Label>
<Col xs={10}>
<Input type="textarea" name="message" id="message"/>
</Col>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button action="submit" color="primary" value={true}>OK</Button>
<Button color="secondary" onClick={this.toggle} value={false}>Cancel</Button>
</ModalFooter>
</Form>
</Modal>
Also, did you bind your toggle to this in your constructor?
constructor(props) {
this.toggle = this.toggle.bind(this);
}
Alternatively, use arrow functions.
toggle = (e) => {
e.preventDefault();
this.setState({
modal: !this.state.modal
});
...
}