davidkpiano / react-redux-form

Create forms easily in React with Redux.
https://davidkpiano.github.io/react-redux-form
MIT License
2.07k stars 251 forks source link

LocalForm: valid & pending #1193

Open jdmoliner opened 5 years ago

jdmoliner commented 5 years ago

Hi,

I can't get to work at the same time valid and pending to disable a button. I need to disable button when form is not valid or is pending.

I have a code like this:

import React from 'react';
import {
  LocalForm,
  Control,
  actions
} from 'react-redux-form';

const validateMinAmount = (amount) => amount > 0;
const validateMaxAmount = (amount) => amount < 10000;

class MyForm extends React.Component {
  constructor(props) {
    super(props);    
  }

  attachDispatch(dispatch) {
    this.formDispatch = dispatch;
  }

  handleSubmit() {
     this.formDispatch(actions.setPending('myform',true));
     console.log("submit!");
  }

  render() {
    return (
      <LocalForm
        model="myform"
        getDispatch={(dispatch) => this.attachDispatch(dispatch)}
        initialState={{amount: ''}}
        onSubmit={(myform) => this.handleSubmit(myform)}
      >
        <Control.text
            type="number"
            model=".amount"                  
            validators={{
               validateMinAmount,
               validateMaxAmount
            }}
            step={0.01}                 
          />

        <Control.button
           type="submit"
           className="save"
           model="myform"
           disabled={{valid:false, pending:true}}  // with disabled={{valid:false}} or disabled={{valid:true}} works, but not at same time
         >
      </LocalForm>
    )
  }
}