在Redux Forms中，如何根據另一個字段的值驗證一個字段？

Question

我正在使用Redux Form版本6.4.3，我試圖驗證兩個日期字段，以便'到'日期必須始終在'從'日期之前。

其他示例說我應該能夠參考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。

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（道具可以傳遞給現場=>驗證）。