在Redux Forms中，如何根据另一个字段的值验证一个字段？

我正在使用Redux Form版本6.4.3，我试图验证两个日期字段，以便'到'日期必须始终在'从'日期之前。在Redux Forms中，如何根据另一个字段的值验证一个字段？

其他示例说我应该能够参考props中的fields数组，但是没有这样的数组。该formstate有一个名为registeredFields然而一个数组，但那些只是似乎是形式{name: 'dob', type: 'Field'}

这里是我的表单代码

import React  from 'react' 
import DatePicker from 'react-bootstrap-date-picker' 
import moment  from 'moment' 

import {Field, reduxForm} from 'redux-form' 
import {Form, Row, Col, Button, FormGroup, ControlLabel, FormControl, HelpBlock} from 'react-bootstrap' 

// validations 
const required = value => !value ? 'This field is required' : undefined 
const maxDate = max => value => 
    value && moment(value).isAfter(max) ? `Must be before ${max}` : undefined 
const minDate = min => value => 
    value && moment(value).isBefore(min) ? `Must be after ${min}` : undefined 

const renderDatepicker = ({ input, label, hint, showTodayButton, meta: { pristine, touched, warning, error } }) => { 
    const validationState = pristine ? null : error ? 'error' : warning ? 'warning' : null 
    return (
    <FormGroup validationState={validationState}> 
    <Col componentClass={ControlLabel} sm={3}>{label}</Col> 
    <Col sm={3}> 
     <FormControl 
     {...input} 
     componentClass={DatePicker} 
     placeholder="DD/MM/YYYY" 
     dateFormat="DD/MM/YYYY" 
     showTodayButton={showTodayButton}/> 
    </Col> 
    {pristine && !!hint && (
     <Col sm={6}> 
     <HelpBlock>{hint}</HelpBlock> 
     </Col> 
    )} 
    {touched && (
     (error && (
     <Col sm={6}> 
      <HelpBlock>{error}</HelpBlock> 
     </Col>) 
    ) || (warning && (
     <Col sm={6}> 
      <HelpBlock>{warning}</HelpBlock> 
     </Col> 
    )) 
    )} 
    </FormGroup> 
)} 

const MyForm = props => { 
    const { error, handleSubmit, pristine, reset, submitting, fields } = props 
    console.debug('fields', fields) // fields is undefined 
    return (
    <Form horizontal> 
     <Field 
     name="dateFrom" 
     component={renderDatepicker} 
     label="Date from" 
     hint="Earliest date for enquiry" 
     validate={[required, maxDate('where do I get the other date value from?')]} 
     /> 
     <Field 
     name="dateTo" 
     component={renderDatepicker} 
     label="Date to" 
     showTodayButton={true} 
     hint="Latest date for enquiry" 
     validate={[required, minDate('where do I get the other date value from?')]} 
     /> 
    </Form> 
) 
} 

export default reduxForm({ 
    form: 'MyForm', 
})(MyForm)

我得到我失去了一些东西很明显的感觉，因为我有所有的例子看到期望fields阵列存在于props。

来源

2017-01-18 Dave Sag

对于终极版的形式，用途：

export default reduxForm({ 
    form: 'MyForm', // a unique identifier for this form 
    validate,    // <--- validation function given to redux-form 
})(MyForm) 

const validate = values => { 
    const errors = {} 
    // Here you can get all the fields in value object, use value.min or value.max 
    return errors 
}

http://redux-form.com/6.4.3/examples/syncValidation/

来源

2017-01-18 11:02:50

太棒了。这正是我需要知道的。 –

另外值得一提的是，Field的验证函数签名是validate : (value, allValues, props) => error [optional]所以你确实有在外地一级到其他领域值的参考验证也是如此。

我相信你可以这样做：

<Field 
    name="dateFrom" 
    component={renderDatepicker} 
    label="Date from" 
    hint="Earliest date for enquiry" 
    validate={[required, (value, values) => maxDate(values.dateTo)(value)]} 
    />

见Field documentation（道具可以传递给现场=>验证）。

来源

2017-03-30 10:18:51

在Redux Forms中，如何根据另一个字段的值验证一个字段？

回答

相关问题