syncError not flagged on Field instance with dot syntax name

Question

I have a Field poll.id that is part of a form that contains multiple parts. Each part is contained in a component with a @reduxForm annotation and each component may have it's own unique validation method.

My problem is that in this case, when the validatePoll returns a validation exception, it doesn't show up at Field level. I wonder if this has to do with the dot syntax of the field.

@reduxForm({
    form: 'posteditor',
    destroyOnUnmount:false,
})
@autobind
class MyForm extends React.Component {

    [...]

    pollButton(field){
        console.log('poll.id', field);//meta.error = undefined
        [...]
    }


    poll(){
        const { poll, visible, syncErrors } = this.props;
        return (
          <Field
            name="poll.id"
            value={poll && poll.id}
            type="number"
            component={this.pollButton}
            props={{
              visible: visible,
              questions: (poll && poll.questions) || []
            }}
            />
        );
    }
}


@reduxForm({
    form: 'posteditor',
    validate: validatePoll,
    destroyOnUnmount:false,
})
@autobind
class PostPoll extends React.Component {

Answer 1

You left out your validation function, but my guess is that you are returning this:

validate(values) {
  const errors = {}
  if(!values.poll.id) {
    errors['poll.id'] = 'Required' // ❌ 👎
  }
  return errors
}

...and you should be returning this:

validate(values) {
  const errors = {}
  if(!values.poll.id) {
    errors.poll = { id: 'Required' } // ✅ 👍
  }
  return errors
}