我在我的应用程序中使用与formik的反应。这是我的表格:
return <Formik initialValues={initialValues}
onSubmit={this.handleSubmit}
render={
(props: FormikProps<Spec>) => (
<>
<div className="col-md-6">
.....
</div>
</>
)
}
validationSchema={Schema}
/>;
其中一个表单字段disableOn
的类型为Date
,initialValues
的设置方式如下:
const initialValues: Spec = {
.
.
disableOn: new Date(),
.
.
};
该表单将值显示为Wed Feb 13 2019 13:29:28 GMT+0530 (India Standard Time)
。
如果表单在提交之前正确验证,这仍然可以。但是,单击提交后,将提交表单而没有验证检查/错误。
我的架构正在使用momentjs验证日期。我的模式-
export const Schema = object().shape({
.
.
disableOn: date()
.required(ErrorMessages.isRequired)
.format("YYYY-MM-DD", ErrorMessages.invalidDate)
.typeError(ErrorMessages.invalidDate)
.min(new Date(), "Date should be between TOMORROW and 9999-01-01")
.max(new Date("9999-01-01"), "Date should be between TOMORROW and 9999-01-01")
,
});
// See https://github.com/jquense/yup/issues/312
// tslint:disable-next-line:space-before-function-paren
yup.addMethod<DateSchema>(yup.date, "format", function (format: string, message: string) {
return this.test({
exclusive: true,
message,
name: "format",
params: {
format,
},
test: function test() {
const validateOptions: ValidateOptions = this.options;
const parsed = moment(validateOptions.originalValue, format, true);
return parsed.isValid();
},
});
});
请建议我应该如何处理我的initialValues
,以便在提交之前对其进行验证。