当前位置:  开发笔记 > 前端 > 正文

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

如何解决《在ReduxForms中,如何根据另一个字段的值验证一个字段?》经验,为你挑选了1个好方法。

我正在使用Redux Form版本6.4.3并且我正在尝试验证两个日期字段,以使'to'日期必须始终在'from'日期之前.

其他例子说我应该能够引用fields数组,props但是没有这样的数组.该form state有称为数组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 (
  
    {label}
    
      
    
    {pristine && !!hint && (
      
        {hint}
      
    )}
    {touched && (
      (error && (
        
          {error}
        )
      ) || (warning && (
        
          {warning}
        
      ))
    )}
  
)}

const MyForm = props => {
  const { error, handleSubmit, pristine, reset, submitting, fields } = props
  console.debug('fields', fields) // fields is undefined
  return (
    
) } export default reduxForm({ form: 'MyForm', })(MyForm)

我感觉到我遗漏了一些明显的东西,因为我所看到的所有例子都期望fields数组存在于props.



1> Y. Sobelman..:

还值得一提的是,Field验证函数签名也是validate : (value, allValues, props) => error [optional]如此,您实际上也可以在字段级验证中引用其他字段值.

我相信你可以这样做:

const maxDateValidationAdapter = (value, values) => maxDate(values.dateTo)(value);
// Alternatively, if maxDate() is used only in this form you can just change its signature

请参阅字段文档(您可以传递给Field => validate的道具).


请记住,像这样传递验证器(作为内联函数)将导致在每个父组件上重新渲染“ Field”并重新注册,这可能会导致某些不良行为。可以在redux-form调度的动作中观察到它。
推荐阅读
mobiledu2402851173
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有