redux-form 未触及字段验证在提交时失败答案

【问题标题】：redux-form untouched field validation fails on submitredux-form 未触及字段验证在提交时失败
【发布时间】：2019-02-06 12:50:48
【问题描述】：

有一个这样的表单使用redux-form

// @flow
import {
  TCard,
} from '../models';
import * as React from 'react';
import { pipe } from 'ramda';
import {
  reduxForm,
  type FormProps,
} from 'redux-form';
import { withSnackbar } from 'notistack';
import { withNamespaces } from 'react-i18next';
import { Field } from 'redux-form';
import { RenderInput } from 'shared/components/';
import {
  Grid,
  Button,
  Typography,
  Divider,
} from '@material-ui/core';
import {
  cardNumberValidate,
  cardMonthValidate,
  cardYearValidate,
  cardCvvValidate,
} from 'shared/utils/validators';
import Card from './components';

import useStyles from './../styles';

type TProps = FormProps & {
  initialValues: TCard,
  t: Function,
  enqueueSnackbar: Function,
  onSubmit: (data: TCard) => void,
};

const PaymentSettings = ({
  t,
  handleSubmit,
  submitting,
  enqueueSnackbar,
  reset,
  onSubmit,
}: TProps) => {
  const classes = useStyles();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Grid container justify="center" spacing={32} alignItems="center">
        <Grid item xs={12} sm={6} md={5}>
          <Card />
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Typography variant="h6">
            Update Card
          </Typography>
          <Divider light />
          <Field
            name="name"
            type="text"
            required={true}
            component={RenderInput}
            label="Card Name"
          />
          <Field
            name="number"
            type="text"
            required={true}
            component={RenderInput}
            validate={cardNumberValidate}
            label="Debit/Credit Card Number"
          />
          <Grid container spacing={16}>
            <Grid item xs={6}>
              <Field
                name="exp_month"
                type="number"
                required={true}
                component={RenderInput}
                validate={cardMonthValidate}
                label="Month"
                min={1}
                max={12}
              />
            </Grid>
            <Grid item xs={6}>
              <Field
                name="exp_year"
                type="number"
                required={true}
                component={RenderInput}
                validate={cardYearValidate}
                label="Year"
                min={new Date().getFullYear()}
              />
            </Grid>
          </Grid>
          <Field
            name="cvc"
            type="text"
            format={formatCVC}
            maxLength={4}
            required={true}
            component={RenderInput}
            validate={cardCvvValidate}
            label="Card CVV"
          />
          <Button
            size="large"
            className={classes.submitButton}
            disabled={submitting}
            type="submit"
            fullWidth
            variant="outlined"
            color="primary">
            Update Card
          </Button>
        </Grid>
      </Grid>
    </form>
  );
};

const formatCVC = (value) => value && value.replace(/[^0-9]/g, '');

const connectAll = pipe(
  withNamespaces(),
  withSnackbar,
  reduxForm({
    form: 'payment',
  }),
);

export default connectAll(PaymentSettings);

它通过了initialValues。当我点击提交而不触及值时。即使值正确，表单也会显示字段验证错误。如果我只是集中并模糊验证通过的字段。

我们如何使表单在提交时验证正确未触及的字段？

【问题讨论】：

你能看到这些字段在浏览器中填写了吗？因为我在组件中的任何地方都没有看到属性 initialValues 的任何用法
@AnthonyRaymond 是的，initialValues 正在被 reduxForm hoc 使用。我也可以在 form reducer 中看到它们。
您是否尝试过componentDidMount 功能在initialValues 预设时使用this.props.blur 功能？它可能会起作用。

标签： reactjs redux-form

【解决方案1】：

你有类似的吗？

connect( state => ({ initialValues: <YourDefaultValue>, }), )();

【讨论】：