5

如果单个条件为真，我有几个字段是必需的。有没有更好的方法来压缩此代码以避免重复when所有这些字段？

const requiredForDiffAddress = {
    is: false,
    then: Yup.string().required()
};

export const BillingAddressYupValidationSchemaShape = {
  useShippingAddress: Yup.boolean().default(true).required(),
  street: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  city: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  state: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
  zipCode: Yup.string()
      .when('useShippingAddress', requiredForDiffAddress),
};

或者更真实、更复杂的样本

const buildRequiredForDiffAddress = requiredText => ({
    is: false,
    then: Yup.string().required(requiredText)
});

export const BillingAddressYupValidationSchemaShape = {
  useShippingAddress: Yup.boolean().default(true).required(),
  street1: Yup.string().when('useShippingAddress', 
      buildRequiredForDiffAddress("How will we know where to send your order?")),
  city: Yup.string().when('useShippingAddress', 
    buildRequiredForDiffAddress("What city do you live in?")),
  state: Yup.string().when('useShippingAddress',
    buildRequiredForDiffAddress("State please!")),
  zipCode: Yup.string().when('useShippingAddress', 
      buildRequiredForDiffAddress("Zip Code please!")),
};
4

1 回答 1

4

TL; DR：问题中发布的解决方案可能是处理仅在基于其他字段的值满足条件时才需要的字段的最佳方法*

扩展答案

在向 Yup 的创建者发送消息后，我已经看了很多次。

他建议

扩展与requiredIf封装这种东西的方法混合

我研究了使用某种形式的lazy. 扩展路线似乎比懒惰路线更好，但最后，我觉得我所拥有的可能是最好的解决方案。

我创建了这个相当详细的 CodeSandbox，有人想尝试一下并找到更好的解决方案。我很乐意为此更改已接受的答案。

https://codesandbox.io/s/xk4r7nq9z

* ...并且您想要每个字段的自定义错误消息。似乎您可以使用默认消息传递，然后发布的示例可能不是最简单的解决方案。

于 2018-11-20T20:48:25.433 回答