Question

我有一个反应形式表格，有一个选择字段，说该字段的值为A，B，C，D，E，F。

现在说，另一个字段ChooseSubType仅在我选择B或D时显示，并且该字段仅在显示时才是必填字段，而不是在此之前。

现在，我该如何工作？

这是第一个字段的代码，即选择字段

chooseAlphabet: Yup.string().required('field required'),
chooseSubType : Yup.string().when('chooseAlphabet',
('chooseAlphabet',schema)=>{
   console.log('value business : ',chooseAlphabet);
   if(chooseAlphabet === "B"||"D"){
     return schema;
   }else{
     return schema.required('field required');
   }
  }),

但是此代码不起作用。

现在，我要在此处进行哪些更改以使它按我的意愿工作？

Answer 1

为您定义的第二个参数架构。

 chooseAlphabet: Yup.string().required('field required'),
        chooseSubType : Yup.string().when('chooseAlphabet',
        (chooseAlphabetValue)=>{
           console.log('value business : ',chooseAlphabetValue);
           if(chooseAlphabetValue=== "B"||"D"){
             return Yup.string();
           }else{
             return Yup.string().required('field required');
           }
          }),

Answer 2

我知道有点晚了，但是你可以尝试一下

chooseSubType: yup.string().when('chooseAlphabet', {
  is: 'B',
  then: schema => schema,
  otherwise: yup.string().when('type', {
    is: 'D',
    then: yup.string().required('field required.')
  })
})

Answer 3

您可以使用相同的代码，只是您需要添加的改进请检查以下代码。

chooseAlphabet: Yup.string().required('field required'),
chooseSubType : Yup.string().when('chooseAlphabet',
(chooseAlphabet,schema)=>{
    console.log('value business : ',chooseAlphabet);
    if(chooseAlphabet === "B"||"D"){
       return schema;
    }else{
       return schema.required('field required');
    }
}),

根据另一个字段的值需要的字段-formik，yup

3 个答案: