让我说我有以下代码:
let addressSchema = yup.object().shape({
firstname: yup.string().required().max(35),
lastname: yup.string().required().max(35),
company: yup.string().max(35),
address1: yup.string().required().max(35),
address2: yup.string().max(35),
city: yup.string().required(),
stateId: yup.string().required(),
zipcode: yup.string().required().length(5),
phone: yup.string().required().matches(phoneRegex, 'Phone number is not valid')
});
let checkoutFormSchema = yup.object().shape({
email: yup.string().email().required(),
billAddressAttributes: addressSchema,
shipAddressAttributes: addressSchema,
});
<Formik
initialValues={this.buildInitialValues()}
onSubmit={(values, actions) => {
}}
validationSchema={checkoutFormSchema}
>
{formikProps => (
<FieldWrapper
Label={<Label placement="left">Email address</Label>}
Input={<Field type="email" name="email" component={Input} />}
/>
<AddressFormFields prefix="billAddressAttributes" />
<AddressFormFields prefix="shipAddressAttributes" />
)}
</Formik>
其中<AddressForm/>
具有用于地址的一堆formik <Field/>
组件,例如如何创建电子邮件字段。
电子邮件字段工作正常,可以触发所有事件并正确显示验证错误,但是我无法在<Field/>
中获取任何格式<AddressForm/>
来触发任何事件,例如触摸或显示验证错误。我猜测是因为formikProps不会传递给<AddressForm/>
,但是我不知道该怎么做。我已经在文档和stackoverflow中进行了彻底的搜索,但是找不到任何有关此操作的示例。
答案 0 :(得分:0)
AddressForm
应该具有放置在Formik
组件中的上下文。也许,您在操纵字段的名称和前缀时犯了一些错误。这是嵌套表单的工作示例: