prasanna1211

// in your root reducer 
import { combineReducers } from 'redux'; 
import { reducer } from 'redux-form'; 
export default combineReducers({ 
form: reducer, // form Reducer which has all details about form. 
// ...other reducers });

// React component
import React, { Component } from 'react'; 
import { Form } from 'formsy-react'; 
class ExampleForm extends Component { 
  constructor() { 
    this.state = { canSubmit: false, }; 
    this.enableSubmit = this.enableSubmit.bind(this); 
    this.disableSubmit = this.disableSubmit.bind(this); 
    this.submitValues = this.submitValues.bind(this);

import React from 'react'; 
import { reduxForm } from 'redux-form'; 
const ExampleForm = ({ invalid, submitting, reset }) => { 
  const handleSubmit = (values) => { 
    console.log(values); // ...code to submit values 
   }; 
  return ( 
    <form onSubmit={handleSubmit}>

/* render part of building component */ 
render() { 
  return ( 
    <div> 
      <label htmlForm={this.props.name}>
        {label}
      </label> 
      
 {/* general props */}

/* return part */ 
const CustomInput = ({ label, input, meta, ...props }) => ( 
  <div 
    className={`${(meta.error ? 'error' : '')} ${(meta.warning ? 'warning' : '')}`}
   > {
        label && {
          <span>{label}</span>
        }
 }

/* Inside wrapped form */ 
<CustomInput 
  name="email" 
  validations="isEmail"> 
<CustomInput 
  name="number" 
  validations="isNumeric, isLength:5" 
/>

/* Inside wrapped form */ 
<CustomInput 
  validationError="Should be an email" 
/>

/* for defining validation */ 
Formsy.addValidationRule('isPhoneNo', (values, value) => { 
  return validPhoneNoRegExPattern.test(value); // assuming validPhoneNoRegExPattern exists 
});

const validate = values => { 
  /* returned object has all errors with name of field as key and error message as value */ 
  const errors = {}; 
  if (!values.userName) { 
    errors.userName = 'Please enter User Name'; 
  } // ... rest of conditions return errors; 
} 

const SampleForm = () =&gt; ( // ...sample form markup );

	```
	// in your root reducer import { combineReducers } from 'redux';
	import { reducer } from 'redux-form';
	export default combineReducers({
	form: reducer, // form Reducer which has all details about form.
	// ...other reducers });
	```