formik

问题 I need to get the validation using Formik that input should only be currentYear and up. const currentYear = new Date().getFullYear(); expiryYear: yup .string() .required('Select expiry year') .min(4, `Invalid year format (Example: ${currentYear + 4})`) .max(4, `Invalid year format (Example: ${currentYear + 4})`) .when('startDate', (currentYear, schema) => currentYear && schema.min(currentYear)), 回答1: Try this please: yup.date() .min(new Date().getFullYear(), 'Year must be current year or

问题 I have form with dynamic amount of inputs (admin email) however checking for uniqueness fails: validationSchema={Yup.object().shape({ adminEmails: Yup.array() .of( Yup.string() .notOneOf(Yup.ref('adminEmails'), 'E-mail is already used') What is best approach here? FYI, as a form helper I use Formik . 回答1: Try this: Yup.addMethod(Yup.array, 'unique', function(message, mapper = a => a) { return this.test('unique', message, function(list) { return list.length === new Set(list.map(mapper)).size;

问题 I am using Formik for my form. One of the input is supposed to be populated by props value. How can I do it? This is my approach: <input type="text" id="country" readOnly value={props.countryCode} // {...formik.getFieldProps("country")} /> but it is most likely interfering with Formik and that is why it does not work. What is the proper solution? Thank you! 回答1: You can inject props value in initialValues. Set enableReinitialize to true. So Form gets re-populated when props changes. <Formik

问题 Generally <TextInput> allows you to type even when you're just specifying a placeholder. However, when using within the Formik form, I am unable to type and validate anything in my form. What am I doing wrong? I have tried onChangeText with setFieldValue and handleChange both. const initialValues: FormValues = { friendEmail: '', }; export const Page: React.FunctionComponent<Props> = ({ toggleShowPage, showPage, }) => { const validationSchema = emailValidationSchema; const getFriendId = React

问题 interface FormValues { friendEmail: string; } const initialValues: FormValues = { friendEmail: '', }; export const Page: React.FunctionComponent<PageProps> = ({ toggleShowPage, showPage, }) => { const [errorMessage, setErrorMessage] = useState(''); const validationSchema = emailValidationSchema; useEffect(() => { if (showPage) return; initialValues.friendEmail = ''; }, [showPage]); const [ createUserRelationMutation, { data: addingFriendData, loading: addingFriendLoading, error:

问题 interface FormValues { friendEmail: string; } const initialValues: FormValues = { friendEmail: '', }; export const Page: React.FunctionComponent<PageProps> = ({ toggleShowPage, showPage, }) => { const [errorMessage, setErrorMessage] = useState(''); const validationSchema = emailValidationSchema; useEffect(() => { if (showPage) return; initialValues.friendEmail = ''; }, [showPage]); const [ createUserRelationMutation, { data: addingFriendData, loading: addingFriendLoading, error:

问题 I have a multi-step form that I want to implement in React using Formik , Material-ui , functional components, and the getState hook. import React, { useState, Fragment } from 'react'; import { Button, Stepper, Step, StepLabel } from '@material-ui/core'; import FormPartA from './FormPartA'; import FormPartB from './FormPartB'; import FormPartC from './FormPartC'; function MultiStepForm(props) { const steps = ['Part A', 'Part B', 'Part C']; const passedValues = props.values || {}; const

问题 I have a custom input field for the phone number made from the library 'react-phone-input-2', I will show the code for the custom input field made by a colleague <PhoneInput inputProps={{ name: inputName, }} country="lb" value={phoneNumber} placeholder="1234456" onChange={phone => handleInputChange(inputName, phone)} buttonClass="buttonarrow" containerStyle={mainContainer} inputStyle={phoneInput(countryCodeBtnWidth, isMobileScreen, hasError)} buttonStyle={countryCodeBtn(countryCodeBtnWidth,

问题 I make request to the server using fetch and get response - category list. This list I display in view- table. Near each category on the right I have button Delete . When I click this button appears modal window with two buttons Delete and Cancel . I used API method DELETE that delete some category. When I click button Delete in modal window My category delete! It's good! But in my page appears error: TypeError: Cannot convert undefined or null to object Why is this happening? And how to fix

问题 I am trying to access Formik values globally so that I can add values.email to the dependency array of my handleSubmitForm . I read about useFormikContext() and am trying to use it but I am unable to. If I add it after handleSubmitForm , I get an error that: Object is of type 'unknown' . To overcome this, I changed this const { values} = useFormikContext(); to this: const values: FormValues = useFormikContext(); but then I get an error on values that: Property 'email' is missing in type