There is a redux form and one field inside

<form onSubmit={...}> <ToggleBox collapsed={...}> <Field name="firstName" component="input" type="text" placeholder="First Name" /> </ToggleBox> <button type="submit"> </form>

If the firstName field is empty, then the form is invalid, and ToggleBox (collapsed property = false) must be expanded so that the invalid field is highlighted.

How is the redux form properly done in this case?

    1 answer 1

    It is better to wrap the Field in the ErrorField component of such content (meta.touched - shows whether the input was in focus, so that errors would not be shown immediately after the render):

     import React from "react"; function ErrorField(props) { const {input, placeholder, type, meta: {error, touched}} = props const errorText = touched && error && <div style={{color: 'red'}}> {error}</div> return ( <div> <label>{input.name}</label> <input {...input} type={type} placeholder={placeholder} /> {errorText} </div> ); } export default ErrorField;

    Then you can call it to validate all other forms. Well, your main component to remake:

     <Field name="firstName" component="ErrorField" type="text" placeholder="First Name" /> //.... const validate = ({firstName}) => { const errors = {}; if(!firstName) errors.firstName= "Нужно ввести имя"; else if (firstName.length < 8) errors.firstName= "Имя должно быть больше 8 символов"; return errors; } //...... export default reduxForm({ //подключаем форму form: "test", validate })(ComponentName)

    • Those. should it be like that? <ToggleBox collapsed = {! (Meta.touched && meta.error)}> - kidar2
    • A little screwed up in the Field field and validate, and meta.errors is an object, and it is always true - DiDex