Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

yup: compare field itself with another field

Tags:

javascript

yup

I had

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .when(
        "StartIntensity",
        (StartIntensity: number, schema: any) => {
            return !!StartIntensity
                ? schema.moreThan(
                        StartIntensity,
                        "Max should be > min"
                  )
                : schema;
        }
    ),

but I need something like that

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .when(
        "StartIntensity, EndIntensity",
        (StartIntensity: number, EndIntensity: number, schema: any) => {
            return !!StartIntensity && StartIntensity !== EndIntensity
                ? schema.moreThan(
                        StartIntensity,
                        "Max should be > min"
                  )
                : schema;
        }
    ),

but code above doesn't work properly. Is there any possibility to make this work ot other ways to execute this validation?

like image 433
Heidel Avatar asked May 21 '19 15:05

Heidel


1 Answers

In your case first argument of .when() should be an array of keys:

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .when(
        ["StartIntensity", "EndIntensity"],
        (StartIntensity: number, EndIntensity: number, schema: any) => {
            return !!StartIntensity && StartIntensity !== EndIntensity
                ? schema.moreThan(
                        StartIntensity,
                        "Max should be > min"
                  )
                : schema;
        }
    ),

keys: string | Array

https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema

If the above code throws "Cyclic dependency" error (which I think it will), try the following code:

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .when('StartIntensity', (StartIntensity, schema) => {
      return schema.test({
        test: EndIntensity => !!StartIntensity && EndIntensity > StartIntensity,
        message: "Max should be > min"
      })
    }),

Or you can also use the ref:

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .moreThan(yup.ref('StartIntensity'), "Max should be > min")
like image 198
Antoni4 Avatar answered Nov 15 '22 11:11

Antoni4