redux-form: [v6] invalid, valid, error props don't change

version: 6 RC3

The sync validation works. If I leave the input name empty it displays the field.error. I would like to disable submit button when there are some errors, but props invalid, valid and error never change.

console.log(error)

is always undefined.

Simplified example:

import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';

const validate = values => {
  const errors = {};
  if (!values.name) {
    errors.name = 'Required';
  }
  return errors;
};

const renderField = field => (
  <div>
    <input {...field.input} />
    {field.touched && field.error &&
      <span>{field.error}</span>}
  </div>
);

const AddPlan = ({ handleSubmit, error }) =>
  <tfoot>
    <tr>
      <td>
        <Field
          component={renderField}
          name="name"
          type="text"
        />
      </td>
      <td>
        <button
          onClick={handleSubmit(data => {
            console.log(error);
          })}
        >
          Add new plan
        </button>
      </td>
    </tr>
  </tfoot>;

export default reduxForm({
  form: 'addPlan',
  validate,
})(AddPlan);

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 20 (2 by maintainers)

Most upvoted comments

@tajo Give up this shitty always broken always API changing library, and use https://github.com/este/este/tree/master/src/common/lib/redux-fields It’s simple, fast, and without breaking changes from day zero. I tried to help @erikras but his EGO is too BIG to accept reality.

+15

steida on Jul 29, 2016

It is working for me now. My issue was caused by a wrong import of reducer from redux-form instead of redux-form/immutable: import { reducer } from 'redux-form' instead of import { reducer } from 'redux-form/immutable' It was not clear to me that I need to use everything from redux-form/immutable but it makes sense now. I was pointed to the right direction reading #1206. Maybe docs should be updated to better explain steps to follow when working with immutable.js, but I’ll agree this is just a personal point of view.

andreapier on Feb 17, 2017

That would be a huge step backwards. How would they get updates? bug-fixes?

No updates. It’s done. I know it’s hard to believe, but it is. Having such tiny dependencies inside the project is actually very common. It’s called a mono repo. React is using it as well.

One day I will move all infrastructure into este npm, like create-react-app does it, but we are not there yet.

https://github.com/babel/babel/blob/master/doc/design/monorepo.md http://danluu.com/monorepo/

The code is here. https://github.com/este/este/tree/master/src/common/lib/redux-fields

steida on Jul 31, 2016

It’s all about priorities. For me, building the Este is priority number one. That’s why I wanted to help here. redux-fields was an attempt of one of Este users. Also, the implementation is so simple that anyone can copy past it to the own project.

As for documentation: Readable source code plus examples are the best documentation.

As for validation: Read my article. Check Este examples, for example, browser auth and React Native auth https://github.com/este/este/blob/master/src/native/auth/Email.react.js

I strongly believe that small composable components and utils are all we need. For example, if someone doesn’t like current Este one by one validation, he can replace it with the own solution easily. React forms and validation should be build like Redux - simple core pluggable everywhere.

As for “No management of actual form state, such as focus” I think everything is there. Actual form state, focus, custom fields, etc. Check both browser and native examples.

React Forms should be all about simple pragmatic hackable bindings, nothing more.

steida on Jul 29, 2016