获取用于在 redux-form 中显示验证错误消息的字段对象

Question

我想做同步验证，但我不知道如何获取该字段的对象

validate.js

const validate = (values) => {
    const errors = {};

    if (!values.firstName) {
        errors.firstName = 'Firstname is required';
    } else if (values.firstName.length < 5 || values.firstName.length > 10) {
        errors.firstName = 'Firstname must be between 5 - 10';
    }
    return errors;
}

export default validate;

SimpleReduxForm.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { reduxForm, Field } from 'redux-form'
import validate from './validate'

const fields = [ 'firstName', 'lastName', 'age' ]

@reduxForm({
    form: 'simpleReduxForm',
    fields,
    validate
})
export default class SimpleReduxForm extends Component {
    render() {
        const { handleSubmit, invalid, pristine, submitting } = this.props
        const { fields } = this.props
        console.log(fields)
        return (
            <div>
                <form onSubmit={ handleSubmit(this.handleFormSubmit) }>

                    <Field name="firstName" component="input" type="text" />
                    <Field name="lastName" component="input" type="text" />
                    <Field name="age" component="input" type="number" />

                    <input type="submit" value="Submit" disabled={ pristine || invalid || submitting }/>
                </form>
            </div>
        )
    }
}

上面源代码console.log(fields)的输出如下

It's just an array not object

我已经从下面的文档中看到 sample coding，但我不知道如何让我的工作正常工作

const { fields: { firstName, lastName } } = this.props

...
{ firstName.touched && firstName.error && <div>{ firstName.error }</div> }

请指教，谢谢

Answer 1

在 redux-forms 网站上有 good example 如何做到这一点。要点是您应该为您的 Field 呈现一个组件，然后该组件将可以访问该输入的数据。例如，这是我的一个，使用了一些 twitter-bootstrap 错误样式。

const renderField = ({ input, label, type, meta: { touched, invalid, error } }) => (
  <div class={`form-group ${touched && invalid ? 'has-error' : ''}`}>
    <label>{label}</label>
    <input {...input} placeholder={label} type={type} className="form-control" />
    <div class="text-danger">
      {touched ? error: ''}
    </div>
  </div>
);

请注意，您只需要拉出 touched、invalid 等而不是 object.property.touched 等

我从我的 Field 声明中使用它，如下所示：

<Field name="name" type="text" component={renderField} label="Name" />

获取用于在 redux-form 中显示验证错误消息的字段对象

Obtaining field's object for displaying validation error message in redux-form

validation

reactjs

redux-form