Redux Formsでは、別のフィールドの値に基づいて1つのフィールドを検証するにはどうすればよいですか？

Question

私はRedux Formバージョン6.4.3を使用していますが、 'to'日付が常に 'from'日付の前にあるように2つの日付フィールドを検証しようとしています。

他の例では、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に存在することが予想されます。 Reduxのフォーム、使用するために

Answer 1

：

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/

Answer 2

それは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（あなたがフィールド=>検証するために渡すことができます小道具）を参照してください。