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?