Custom input validation in react-final-form

Question

I have set up a custom TimePicker component which I want to connect to react-final-form.

Form

<Form
  onSubmit={onSubmit}
  render={({ handleSubmit, form, submitting, pristine }) => (
    <form onSubmit={handleSubmit}>
      <Field
        id="time"
        name="time"
        label="Time"
        component={TimePicker.Adapter}
      />
      <Button
        disabled={submitting || pristine}
        color="primary"
        variant="contained"
        type="submit"
      >
        Submit
      </Button>
    </form>
  )}
/>

TimePicker

// Adapter for https://final-form.org/
const TimePickerAdapter = ({ input, meta, ...rest }) => (
  <TimePicker
    {...input}
    {...rest}
    value={input.value === '' ? null : input.value}
    onChange={value => input.onChange(value)}
    error={(meta.error || meta.submitError) && meta.touched}
    errorText={meta.touched ? meta.error || meta.submitError : ''}
  />
);

// TimePicker implementation goes here..
function TimePicker(props) { ... }

TimePicker.Adapter = TimePickerAdapter;
export default TimePicker;

For external Field-Level-Validation I would add a validate prop to the <Field />. For example:

const required = value => (value ? undefined : 'Required')

<Field
  id="time"
  name="time"
  label="Time"
  validate={required}
  component={TimePicker.Adapter}
/>

But I need an internal validation that gets passed to the <Form /> as well. For example the TimePicker is an input that expects values like 1000 (=> 10:00) but there is a input like 9999 which is obviously not a valid input since the maximum available time is 2359.

I would like to trigger a form error inside the custom input component/adapter. Is there a way to perform this?

Custom input validation in react-final-form

0 Answers0