How to disable submit button in redux-form

Question

I am working on a login page where I am using redux-form. I want to disable the submit button until email and password are filled. I tried but I am failed, could someone please help me how to achieve my goal. Thanks

Code

<form onSubmit={handleSubmit}>
      <div className="sign-up-form">
        <div className="space-2">
          <Field
            name="email"
            component={renderField}
            type="email"
            label="Email"
          />
        </div>
        <div className="space-2">
          <Field
            name="password"
            component={renderField}
            type="password"
            label="Password"
          />
        </div>
        {/* <button className='login-button' type='submit'>Login</button> */}
        <div className="">
          <button className="login-button" type="submit">
            {loading ? (
              <Loader
                type="ThreeDots"
                color="#ffffff"
                height="10"
                width="100"
              />
            ) : (
              "Login"
            )}
          </button>
        </div>
      </div>
    </form>

Answer 1

You can check this link handleSubmit and props:

https://redux-form.com/6.0.0-alpha.4/docs/api/props.md/

    const {invalid} = this.props

    return(
    <button type="submit" className="send-btn"
         disabled={invalid|| submitting || pristine}>
         submit
     </button>)

Answer 2

A possible way of doing this is use redux-form selectors to read the input values and return a property indicating if the button should be enabled or not.

To do so, you need to connect your form to redux state and use mapStateToProps to return the desired value.

Idea:

import { connect } from "react-redux";
import { Field, reduxForm, formValueSelector } from "redux-form";


let MyForm = props => {
  const { enableSubmit } = props; // new property set from redux state

  return (
    <form>
     ... your form 
   </form>
}

const selector = formValueSelector("myForm"); // <-- same as form name
MyForm = connect(state => {
  const hasUsername = selector(state, "email"); // read username value
  const hasPassword = selector(state, "password"); // read username value
  const enableSubmit = hasUsername && hasPassword; // logic for enabling the submit button
  return {
    enableSubmit // this will set property `enableSubmit` which you can read in your component
  };
})(MyForm);

I prepared a working example here