Я пишу приложение, в котором у моего 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;