Redux-form-material-ui: Checkbox field validation
Lets say we have the example with the checkbox:
<Field name="agreeToTerms" component={Checkbox} label="Agree to terms?" validate={[required]}/>
The validation doesn't work because there isn't a mapError function in checkbox component. Is that on purpose? This is for version 5.0
Duskfall
>All comments
My version in the end is:
const CheckboxWithLabelAndError = ({
input,
label,
classes,
meta: {touched, error},
children,
...custom
}) => (
<FormControl error={Boolean(touched && error)} fullWidth>
<FormControlLabel
label={label}
control={
<Checkbox
{...input}
onChange={event => input.onChange(event.target.checked)}
value={input.value}
checked={input.value}
{...custom}>
{children}
</Checkbox>
}
/>
{touched && error && <FormHelperText className={classes.checkboxError}>{error}</FormHelperText>}
</FormControl>
);
Example:
<Field
color="primary"
name="agreeToTerms"
className={classes.checkbox}
classes={{checked: classes.checked, checkboxError: classes.checkboxAgreeError}}
label="test label which is passed to checkbox"
component={CheckboxWithLabelAndError}
validate={[required]}
/>
This way we get inline validation errors for Checkbox component as well
Duskfall
on 4 Jun 2018
Related issues
uxon123
路
4Comments
mohamed-nazim
路
5Comments
VasilyShelkov
路
4Comments
ilyador
路
4Comments
rspicer
路
7Comments
Most helpful comment
My version in the end is:
const CheckboxWithLabelAndError = ({ input, label, classes, meta: {touched, error}, children, ...custom }) => ( <FormControl error={Boolean(touched && error)} fullWidth> <FormControlLabel label={label} control={ <Checkbox {...input} onChange={event => input.onChange(event.target.checked)} value={input.value} checked={input.value} {...custom}> {children} </Checkbox> } /> {touched && error && <FormHelperText className={classes.checkboxError}>{error}</FormHelperText>} </FormControl> );Example:
<Field color="primary" name="agreeToTerms" className={classes.checkbox} classes={{checked: classes.checked, checkboxError: classes.checkboxAgreeError}} label="test label which is passed to checkbox" component={CheckboxWithLabelAndError} validate={[required]} />This way we get inline validation errors for Checkbox component as well