redux-form - asyncBlurFields with FieldArray Component

Question

I'm wondering how to get async validation to trigger on a Field component inside of a FieldArray. I have something like:

class MyForm extends Component {
  constructor(props) {
    super(props)

  }

  render() {
    const { handleSubmit } = this.props

    return (
      <form onSubmit={handleSubmit}>  
        <Field
          name="name"
          type="text"
          component={RenderInputField}
        />
        <FieldArray
          name="hobbies"
          component={RenderHobbies}
        />
      </form>
    )
  }
}

MyFormBase = reduxForm ({
  form: 'MyForm',
  validate,
  asyncValidate,
  asyncBlurFields: ['name', 'hobbies.hobby']
})(MyFormBase)

With RenderHobbies as:

const RenderHobbies = ({fields}) => (
  <div>
    {fields.map((hobby, index) => ({
      <Field
        name={`${hobby}.hobby`}
        component={RenderInputField}
      />
    }))}
  </div>
)

export default RenderHobbies

This doesn't work. async validation will fire for "name" on blur but not "hobbies.hobby". What would the correct syntax for that be?

Obscenity · Accepted Answer · 2017-09-13 02:44:41Z

5

The syntax I was looking for was:

asyncBlurFields: ['hobbies[].hobby']

Pretty simple, I just couldn't find it anywhere in the docs. I found it by going through this thread

answered Sep 13, 2017 at 2:44

Obscenity

2172 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Obscenity Over a year ago

I guess a follow up question I have to that is how do I then access the index of that hobby in my asyncValidate function?

Collectives™ on Stack Overflow

redux-form - asyncBlurFields with FieldArray Component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related