formik

问题 I am catching errors from api and showing them in form, and that is working fine. But the problem is when I change one field in form all errors disappear. For form I am using Formik and for validation Yup. const handleSubmit = (values, {setSubmitting, setFieldError, setStatus}) => { someApiCall(values) .then( () => { }, (error) => { // example of setting error setFieldError('email', 'email is already used'); }) .finally(() => { setSubmitting(false) }); }; I tried with adding third parametar

问题 I am catching errors from api and showing them in form, and that is working fine. But the problem is when I change one field in form all errors disappear. For form I am using Formik and for validation Yup. const handleSubmit = (values, {setSubmitting, setFieldError, setStatus}) => { someApiCall(values) .then( () => { }, (error) => { // example of setting error setFieldError('email', 'email is already used'); }) .finally(() => { setSubmitting(false) }); }; I tried with adding third parametar

问题 Hi I am running into issues when I am trying to use the spread operator with Typescript. I have the function where the useFormikContext() and useField() functions are from Formik's library. When I add the //@ts-ignore everything works superbly as intended however, without that line I receive an error: const DatePickerField = ({ ...props }) => { const { setFieldValue } = useFormikContext(); //@ts-ignore const [field] = useField(props); return ( <DatePicker {...field} {...props} selected={

问题 Hi I am running into issues when I am trying to use the spread operator with Typescript. I have the function where the useFormikContext() and useField() functions are from Formik's library. When I add the //@ts-ignore everything works superbly as intended however, without that line I receive an error: const DatePickerField = ({ ...props }) => { const { setFieldValue } = useFormikContext(); //@ts-ignore const [field] = useField(props); return ( <DatePicker {...field} {...props} selected={

问题 I am using Formik/Yup for a validation of a page, which calls a GraphQL mutation. My code works fully: export default function RemoveUserPage() { const [isSubmitted, setIsSubmitted] = useState(false); const [isRemoved ,setIsRemoved] = useState(false); const [errorMessage, setErrorMessage] = useState(''); const [removeUser] = useMutation(RemoveUserMutation); function submitForm(email: string) { setIsSubmitted(true); removeUser({ variables: { email: email, }, }).then(({ data }: any) => {

问题 Here is my validation schema: const validationSchema = Yup.object().shape({ person: Yup.object().shape({ name: Yup.string().required('Field is required'), surname: Yup.string().required('Field is required'), middleName: Yup.string().required('Field is required'), email: Yup.string() .email('Wrong e-mail format') .required('Field is required') }), company: Yup.object().shape({ name: Yup.string().required('Field is required'), address: Yup.string().required('Field is required'), email: Yup

问题 Here is my validation schema: const validationSchema = Yup.object().shape({ person: Yup.object().shape({ name: Yup.string().required('Field is required'), surname: Yup.string().required('Field is required'), middleName: Yup.string().required('Field is required'), email: Yup.string() .email('Wrong e-mail format') .required('Field is required') }), company: Yup.object().shape({ name: Yup.string().required('Field is required'), address: Yup.string().required('Field is required'), email: Yup

问题 Is there a way to get the value of a field inside a click handler in formik? You can use setFieldValue in there, so I'd assume (but can't find anywhere) that Formik should have something like that for retrieving values: <Button onClick={() => getFieldValue('name') === 'Test' ? action1 : action2} What is the correct way to do this in Formik? 回答1: Formik passes its values object into your form via props . Imagine you have an input, wired into Formik under the name firstName . You can access the

问题 How do you create a YUP schema with dynamic dot notation field names? The below schema is not valid. How would I iterate through Costs.0.item, Costs.1.item, Costs.2.item AND Costs.0.amount, Costs.1.amount, Costs.2.amount dynamically? Any help is appreciated! const IpSchema = Yup.object().shape({ Project_Title: Yup.string() .min(2, 'Too Short!') .max(255, 'Too Long!') .required('Required'), Costs.0.item: Yup.string() .min(2, 'Too Short!') .max(255, 'Too Long!') .required('Required'), Costs.1

问题 I have a modal form with a form that uses Formik . Here are two pictures that show two states of that form that can be toggled with a switch.Initially I fill text into fields which can be added dynamically and stored as an array with . The second picture shows how I toggled to textarea . There you can also add text with commas that will be turned into an array. Is there any way to fill data in input fields from the first screen, toggle into textarea and access already inputted data. I