未在React中瞬间验证的日期的IntialValues

时间:2019-02-13 08:16:16

标签: reactjs momentjs formik

我在我的应用程序中使用与formik的反应。这是我的表格:

return <Formik initialValues={initialValues}
                   onSubmit={this.handleSubmit}
                   render={
                       (props: FormikProps<Spec>) => (
                           <>
                               <div className="col-md-6">
                                   .....
                               </div>
                           </>
                       )
                   }
                   validationSchema={Schema}
    />;

其中一个表单字段disableOn的类型为DateinitialValues的设置方式如下:

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,以便在提交之前对其进行验证。

0 个答案:

没有答案