Question

有一个这样的形式使用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。当我单击提交而不触碰值时。该表格显示字段验证错误，即使值正确。如果我只关注和模糊这些字段，则验证通过。

我们如何制作表单以验证提交时未修改的正确字段？

Answer 1

你有那样的东西吗？

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

redux形式的未修改字段验证在提交时失败

1 个答案: