Redux-С даты проверки - PullRequest
       7

Redux-С даты проверки

0 голосов
/ 19 сентября 2019

Я пишу приложение, в котором у моего form есть обязательное поле даты вместе с полем других.но поле даты не является обязательным.

, поэтому в моем случае, если я выбираю или вписываю дату в поле, оно должно быть отправлено на API, но если поле пустое, то форма также должна submit безлюбая ошибка, потому что поле даты не является обязательным.

теперь, когда я собираюсь отправить форму, оно показывает ошибку, когда дата пуста.

UserForm.js

import validate from './validate';
import FormTextField from '../../../../components/FormTextField';

    class UserForm extends Component {

      render() {
        const { invalid, option, errorData, initialValues, intl } = this.props;

        return (
          <form>
                <Field
                  name="firstName"
                  fullWidth
                  component={FormTextField}
                  label={intl.formatMessage(globalMessages.firstName)}
                  type="text"
                  color="inherit"
                  margin="normal"
                />

                <Field
                  name="lastName"
                  component={FormTextField}
                  label={intl.formatMessage(globalMessages.lastName)}
                  type="text"
                  color="inherit"
                  margin="normal"
                />

                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                  <Field
                    name="expiredDate"
                    component={renderDatePicker}
                    intl={intl}
                    fullWidth
                    label={intl.formatMessage(globalMessages.expiryDate)}
                    margin="normal"
                  />
                </MuiPickersUtilsProvider>

                <Button
                  variant="contained"
                  type="submit"
                  size="large"
                  fullWidth
                  color="primary"
                  disabled={invalid}
                  style={{
                    marginTop: dimension.spacing.s,
                  }}
                  onClick={this.props.handleSubmit}
                  id="loginButton"
                >
                  {<FormattedMessage {...globalMessages.addUser} />}
                </Button>

          </form>
        );
      }
    }

    const renderDatePicker = props => {
      const {
        input: { onChange, value },
        label,
        intl,
        meta: { touched, invalid, error },
        ...custom
      } = props;

      return (
        <KeyboardDatePicker
          autoOk
          okLabel=""
          cancelLabel=""
          id="date_picker"
          label={label}
          animateYearScrolling
          inputVariant="outlined"
          minDate={new Date()}
          value={moment(value)}
          format="DD/MM/YYYY"
          inputProps={{
            placeholder: 'DD/MM/YYYY',
          }}
          onChange={(momentDate) => {
            if (momentDate !== null && momentDate.isValid()) {
              onChange(momentDate.format('YYYY-MM-DD'));
            } else {
              onChange('');
            }
            return momentDate;
          }}
          invalidDateMessage={touched ? intl.formatMessage(messages.invalidDate) : ""}
          minDateMessage={intl.formatMessage(messages.errorPastDate)}
          {...custom}
        />
      );
    };

    renderDatePicker.propTypes = {
      input: PropTypes.object,
      intl: PropTypes.object,
      label: PropTypes.string,
    };

    UserForm.propTypes = {
      ...InjectedFormProps,
      intl: PropTypes.object,
      errorData: PropTypes.object,
      option: PropTypes.object,
    };

    export default reduxForm({
      validate,
      form: 'userForm',
    })(UserForm);

validate.js

const validate = values => {
  const errors = {};
  const requiredFields = ['firstName','lastName'];

  if (!values.isEmpty()) { 
      requiredFields.forEach(field => {
        if (!values.get(field)) {
          errors[field] = <FormattedMessage {...globalMessages.required} />;
        }
      });

  }
  return errors;
};

export default validate;
...