javascript - react - Redux-form: muestra una lista de errores en la parte superior de una página

redux form react native

Question

Quiero usar Redux-form de una manera que cambie el color de entrada y muestre el error real en la parte superior de la página. ¿Cómo accedo a la lista de errores de campo actuales fuera de los campos?

Answer 1

No puede obtener la lista de errores desde fuera de la función de representación dada al componente de Campo. Esto se debe a que los errores no se almacenan en la tienda redux.

Solución 1: use múltiples campos por el mismo valor

La primera solución es usar múltiples instancias de Campo para el mismo valor. Si varios componentes de campo tienen el mismo nombre y están conectados al mismo nombre de formulario, todos estarán conectados al mismo valor y al mismo tratamiento de errores.

Entonces puede usar un componente Field y solo renderizar el error.

import React from ''react''
import {reduxForm} from ''redux-form''

const renderError = ({input, meta, ...props}) => (
    <span {...props} className=''error''>Error : {meta.error}</span>
)

const renderInput = ({input, meta, ...props}) => (
    <input {...input} {...props} className={meta.error ? ''error'' : null} />
)

const FormWithError = ({handleSubmit}) => (
    <div>
        <div className=''errorContainer''>
            <Field name=''myInput'' component={renderError} />
        </div>
        <form onSubmit={handleSubmit}>
            <Field name=''myInput'' component={renderInput} />
        </form>
    </div>
)

const validate = (values, props) => {
    const errors = {}
    /* calculate errors here by appending theim to errors object */
    return errors
}

export default reduxForm({form: ''myForm'', validate})(FormWithError)

Solución 2: utilice el soporte de error global

Una segunda solución es usar los puntales de error global, pero tendrá que mostrar los errores del componente contenedor utilizando reduxForm .

¡Presta atención de que se trata de un antipatrón total! Global error prop es para errores independientes de campo.

import React from ''react''
import {reduxForm} from ''redux-form''

const renderInput = ({input, meta, ...props}) => (
    <input {...input} {...props} className={meta.error ? ''error'' : null} />
)

const FormWithError = ({handleSubmit, error}) => (
    <div>
        <div className=''errorContainer''>
            <span {...props} className=''error''>Error : {error}</span>
        </div>
        <form onSubmit={handleSubmit}>
            <Field name=''myInput'' component={renderInput} />
        </form>
    </div>
)

const validate = (values, props) => {
    const errors = {}
    /* calculate errors here by appending theim to errors object */
    if(Object.keys(errors) > 0) {
        //You can concatenate each error in a string
        for(key in errors) errors._error += key + '': '' + errors[key]
        //or juste put the errors object in the global error property
        errors._error = {...errors}
    }
    return errors
}

export default reduxForm({form: ''myForm'', validate})(FormWithError)

Solución 3: obtener errores de la tienda

Siempre puede obtener errores de la tienda al aplicar su función de validación en el valor que se presenta en la tienda. Puede no ser eficaz para la validación pesada porque se ejecuta a través de la validación en cada procesamiento, por lo que se ejecuta dos veces cuando un valor cambia y uno para nada si cambian algunos otros accesorios. También puede ser difícil de hacer con la validación asincrónica.

import React from ''react''
import {reduxForm, formValueSelector} from ''redux-form''
import {connect} from ''redux''

const renderErrors = errors => {
    const errorNodes = []
    for(key in errors) errorNodes.push(<span className=''error''>{key}: {errors[key]}</span>)
    return errorNodes
}

const renderInput = ({input, meta, ...props}) => (
    <input {...input} {...props} className={meta.error ? ''error'' : null} />
)

let FormWithError = ({handleSubmit, values, ...otherProps}) => (
    <div>
        <div className=''errorContainer''>
            {renderErrors(validate(values, otherProps))}
        </div>
        <form onSubmit={handleSubmit}>
            <Field name=''myInput1'' component={renderInput} />
            <Field name=''myInput2'' component={renderInput} />
        </form>
    </div>
)

const validate = (values, props) => {
    const errors = {}
    /* calculate errors here by appending theim to errors object */
    return errors
}

FormWithError = reduxForm({form: ''myForm'', validate})(FormWithError)
FormWithError = connect(
    state => formValueSelector(''myForm'')(state, ''myInput1'', ''myInput2'')
)(FormWithError)

Una última solución puede ser almacenar los errores en la tienda implementando el componentWillReceiveProps y enviando una acción para actualizar una lista de errores en la tienda, pero no creo que sea realmente una buena idea. Es mejor mantener un componente sin estado simple para representar un componente de campo.

Answer 2

Puede usar los selectores de estado proporcionados por redux-form .

En particular, getFormSubmitErrors le proporcionará los errores de validación de envío:

connect(state => ({
  submitErrors: getFormSubmitErrors(''my-form'')(state)
}))(MyForm);