基于另一个字段的值所需的字段 - formik，是的答案

【问题标题】：field required based on value of another field - formik, yup基于另一个字段的值所需的字段 - formik，是的
【发布时间】：2019-04-14 04:59:17
【问题描述】：

我有一个 react formik 表单，有选择字段的地方，假设该字段具有值 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');
   }
  }),

但此代码不起作用。

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

【问题讨论】：

您是否收到验证错误或chooseSubType 没有显示？

标签： reactjs formik yup

【解决方案1】：

我知道有点晚了，但你可以试试这个

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

【讨论】：

【解决方案2】：

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

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');
    }
}),

【讨论】：

【解决方案3】：

对你来说，第二个参数模式是未定义的。

 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');
           }
          }),

【讨论】：