API errors handling about form HOT 11 CLOSED

Well, the most common use-case for API errors is after invoking submit method. I personally would expect explicit errors merge, but as @dcolucci pointed out, it is basically possible in validations using props. Sorry, missed this functionality (and I definitely think it should be reflected in documentation).

Thank you!

from form.

1. Well, validate is a synchronous operation. So errors outside of client-side validation should be added manually. Even with async validation we still can run into this problem – imagine a situation when we have to show message near the input, if time run off.

2. But internally I won't use any refs! The idea is that API errors are the same errors as we have client-side, and sometimes it is not just a notification, but some info relevant to field. So it'd be nice to have this ability to render any errors natively.

from form.

I notice validate passes state and props in addition to form values. Maybe this can help us. Modifying your Address example slightly (purposefully verbose & pedantic),

const AddressForm = Form({
  // here we pass state and props as well
  validate: (values, state, props) => {
    let streetError
    if (props.apiStreetError) {
      streetError = `we didn't find ${values.street} in our API!`
    }

    return {
      street: streetError,
      city: !values.city ? 'A city is required' : undefined,
      state: !values.state ? 'A state is required' : undefined
    }
  }
})(() => {
  return (
    <div>
      <Text
        field='street'
        placeholder='Street'
      />
      <Text
        field='city'
        placeholder='City'
      />
      <Text
        field='state'
        placeholder='State'
      />
    </div>
  )
})

And then somewhere else we could have something like

<AddressForm apiStreetError={true} />

Then potentially-async outside operations (talking to API, etc) could force a re-render of the form with relevant validation messages.

from form.

from form.

from form.

from form.

from form.

I haven't tried that nor any of the above, more just thinking out loud in response to original question. The above idea also relies on validate being called when the component receives new props, which it seems like it should since componentWillReceiveProps calls setFormState which calls validate.

from form.

from form.

Honestly at this point, whatever needs to happen (as long as it aligns well with the api in the long run) I can build in fairly quickly. Just let me know what the most painless path to your goal is and I'll make your wildest dreams come true haha

from form.

I tried that idea, and here is what happens:

1. Validate runs and passes initially.
2. Submit sends data to the API.
3. The form takes new props, but nothing changes the view, because validate does not run on componentWillReceiveProps and that's reasonable.

I think we need to add "errors" to the Form API, and make it gets merged by the form's errors. so using ref seems the only possible way.

from form.