How to get Redux Dynamic form values without specifying the name - reactjs

Question

I am generating my form by JSON data. Form rendering is working fine. Now i want to get the form values on submit something like below.So that i can call an API to save those values in the same submit event.
{"elementname1":"value1",
"elementname2":"value2"
"elementname2":"value2"}
Is there any way to get the values like that .
i have tried with formValueSelector but we have to specify the element name to get the value.
Here is my code
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { getTemplateData } from './actions';
import autoBind from 'react-autobind';
import { Scrollbars } from 'react-custom-scrollbars';
import { getFormValues, Field, reduxForm } from 'redux-form';
import { formValueSelector } from 'redux-form';
function mapDispatchToProps(dispatch) {
return {
loadData() {
return dispatch(getTemplateData())
}
}
}
function mapStateToProps(state,ownProps) {
const selector = formValueSelector('create-template-form')
return {
...state,
templateData: state.templateData
}
}
class createTemplate extends Component {
constructor(props, context) {
super(props, context);
autoBind(this);
this.state = {
topTabSelected: "details",
leftTabSelected: "details",
tabIndex: 0,
dataIndex: 0
};
this.gotoGenRulesState = this.gotoGenRulesState.bind(this);
}
gotoGenRulesState = (data) => {
this.props.dispatch({ type: 'FORM_SUBMITTED',data});
}
componentDidMount() {
this.props.loadData();
}
render() {
const renderField = ({ field, detailType}) => {
const { type, placeholder } = field[detailType];
if (type === 'text' || type === 'email' || type === 'number' || type === 'checkbox') {
return <input name={detailType + field.key} {...field.input} className="form-control" placeholder={placeholder} type={type} />
} else if (type === 'select') {
const { options } = field
return (
<select name={field.name} className="form-control" onChange={field.input.onChange}>
{options.map((option, index) => {
return <option key={index} value={option.value}>{option.label}</option>
})}
</select>
)
} else {
return <div>Type not supported.</div>
}
}
return (
<form onSubmit={this.gotoGenRulesState}>
<div>
<div className="row" style={{ padding: "30px 80px" }} >
<div className="padding-sides-none col-md-12">
<h3 className="purple-color">Create Template</h3>
<div className="tabbable">
{this.props.templateData &&
<ul className="nav nav-tabs tab-nav toptab">
{this.props.templateData.map((data, index) => (
<li className={`${data.key === this.state.topTabSelected ? 'active' : ''}`} key={data.key + index} style={{ cursor: 'pointer' }} ><a onClick={() => this.openTopTab(data.key, index)}
data-toggle="tab">{data.name}</a></li>
))}
</ul>
}
<div className="">
{this.props.templateData && this.props.templateData[this.state.tabIndex] &&
<div className="tabbable tabs-left row">
<div className="padding-sides-none col-md-4 tab-sec">
<ul className="nav tab-nav">
{this.props.templateData[this.state.tabIndex].subnodes.map((data, index) => (
<li key={data.key + index} style={{ cursor: 'pointer' }} ><a className={`${data.key === this.state.leftTabSelected ? 'detailsTitleActive' : ''}`} onClick={() => this.openDetailsTab(data.key, index)}
data-toggle="tab">{data.name}</a></li>
))}
</ul>
</div>
<div className="col-md-8 padding-sides-none inner-tab-content">
<Scrollbars style={{ height: 400 }}>
<div className="tab-content">
{this.props.templateData[this.state.tabIndex].subnodes[this.state.dataIndex].subnodes.map((field, index) => (
<div className={`form-group ${field.type === 'CompleteDetail' ? 'dynamic-field-inline' : ''}`} key={field.name}>
<label>{field.name}</label>
{field.detail &&
<span>
{field.type === 'CompleteDetail' && <label>Details</label>}
<Field
name={`details${field.key}`}
component={renderField}
field={field}
detailType='detail'
/>
</span>
}
{field.range &&
<span>
{field.type === 'CompleteDetail' && <label>Range</label>}
<Field
name={'range' + field.key}
component={renderField}
field={field}
detailType='range'
/>
</span>
}
{field.operator &&
<span>
{field.type === 'CompleteDetail' && <label >Operator</label>}
<Field
name={'operator' + field.key}
component={renderField}
field={field}
detailType='operator'
/>
</span>
}
</div>
))}
</div>
</Scrollbars>
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</form>
)
}
}
createTemplate = reduxForm({
form: 'create-template-form', // a unique identifier for this form
})(createTemplate)
createTemplate = connect(
mapStateToProps,
mapDispatchToProps
)(createTemplate)
export default createTemplate;

Answer 1

Using redux form you can get all form values with state.form.create-template-form.
By the way you should rename your form identifier with camelCase :
connect(
state => ({
myFormValues: state.form.createTemplateForm,
}),
)
And you will acces this value thanks to props this.props.myFormValues

Answer 2

If you want to use values when submitting, you can also do that :
submitFunction = (data) => {
console.log(data) // you can use your form data here, and you don't need form name
};
render() {
return (
<form onSubmit={this.props.handleSubmit(this.submitFunction)}>