javascript - How to friend Formik with react-phone-number-input lib? - Stack Overflow

admin管理员组

文章数量:1415420

I am trying to develop a form using Formik, Material UI, and React-phone-number-input lib (for phone number formatting). I faced a problem. When a phone number is being entered, one is already formatted as intended, but that number is not inserted into Formik state. So, the phone number value is not visible for Formik, and as a result, Formik can not take away an error marker "Required", when some value is entered. Having Guessed, I use react-phone-number-input lib and Formik in the not right way together. How to use them right?

github:

I have the base file src/App.js. Where I use PhoneNumberInput ponent. This is actually my phone number input.

export const App = () => {
    return (
        <>
            <Formik
                initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    phoneNumber: '',
                }}
                validationSchema={Yup.object({
                    firstName: Yup.string()
                        .max(15, 'Have to be 15 characters or less')
                        .required('Required'),
                    lastName: Yup.string()
                        .max(20, 'Have to be 20 or less characters')
                        .required('Required'),
                    email: Yup.string().required('Required.'),
                    phoneNumber: Yup.string().required('Required'),
                })}
                onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2))
                        setSubmitting(false)
                    }, 400)
                }}
            >
                {context => (
                    <Form>
                        <MainContainer>
                            <Title text={'Step 2'} iconRender={<AccountCircleRoundedIcon />} />
                            <TextInput text={'Email'} name={'email'} />
                            <PhoneNumberInput
                                name={'phoneNumber'}
                                label={'Phone Number'}
                                context={context}
                            />
                            <MyButton>Next</MyButton>
                        </MainContainer>
                    </Form>
                )}
            </Formik>
        </>
    )
}

And in src/ponents/PhoneNumberInput/PhoneNumberInput.js I define PhoneNumberInput ponent. I use Input ponent from react-phone-number-input to have the opportunity to use a custom input.

const MyField = React.forwardRef(function custom(props, ref) {
    const { name, label } = props
    return (
        <Field
            {...props}
            ponent={TextField}
            label={label}
            name={name}
            variant="outlined"
            inputRef={ref}
            fullWidth
        />
    )
})

export const PhoneNumberInput = ({ text, ...props }) => {
    const [value, setValue] = useState()
    const [focus, setFocus] = useState(false)

    console.log(props.context)
    return (
        <>
            <Input
                {...props}
                country="UA"
                international={focus}
                value={value}
                withCountryCallingCode
                onChange={setValue}
                inputComponent={MyField}
                onFocus={() => setFocus(true)}
                control={props.control}
            />
        </>
    )
}

What is wrong? How to tackle that?

I am trying to develop a form using Formik, Material UI, and React-phone-number-input lib (for phone number formatting). I faced a problem. When a phone number is being entered, one is already formatted as intended, but that number is not inserted into Formik state. So, the phone number value is not visible for Formik, and as a result, Formik can not take away an error marker "Required", when some value is entered. Having Guessed, I use react-phone-number-input lib and Formik in the not right way together. How to use them right?

github:https://github./AlexKor-5/FormChallenge/tree/0d37064ef54c8e87a6effb950575a5a3817d9220

I have the base file src/App.js. Where I use PhoneNumberInput ponent. This is actually my phone number input.

export const App = () => {
    return (
        <>
            <Formik
                initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    phoneNumber: '',
                }}
                validationSchema={Yup.object({
                    firstName: Yup.string()
                        .max(15, 'Have to be 15 characters or less')
                        .required('Required'),
                    lastName: Yup.string()
                        .max(20, 'Have to be 20 or less characters')
                        .required('Required'),
                    email: Yup.string().required('Required.'),
                    phoneNumber: Yup.string().required('Required'),
                })}
                onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2))
                        setSubmitting(false)
                    }, 400)
                }}
            >
                {context => (
                    <Form>
                        <MainContainer>
                            <Title text={'Step 2'} iconRender={<AccountCircleRoundedIcon />} />
                            <TextInput text={'Email'} name={'email'} />
                            <PhoneNumberInput
                                name={'phoneNumber'}
                                label={'Phone Number'}
                                context={context}
                            />
                            <MyButton>Next</MyButton>
                        </MainContainer>
                    </Form>
                )}
            </Formik>
        </>
    )
}

And in src/ponents/PhoneNumberInput/PhoneNumberInput.js I define PhoneNumberInput ponent. I use Input ponent from react-phone-number-input to have the opportunity to use a custom input.

const MyField = React.forwardRef(function custom(props, ref) {
    const { name, label } = props
    return (
        <Field
            {...props}
            ponent={TextField}
            label={label}
            name={name}
            variant="outlined"
            inputRef={ref}
            fullWidth
        />
    )
})

export const PhoneNumberInput = ({ text, ...props }) => {
    const [value, setValue] = useState()
    const [focus, setFocus] = useState(false)

    console.log(props.context)
    return (
        <>
            <Input
                {...props}
                country="UA"
                international={focus}
                value={value}
                withCountryCallingCode
                onChange={setValue}
                inputComponent={MyField}
                onFocus={() => setFocus(true)}
                control={props.control}
            />
        </>
    )
}

What is wrong? How to tackle that?

• javascript
• reactjs
• material-ui
• formik

Share Improve this question Follow asked May 3, 2022 at 16:33 AlexKor5AlexKor5 3111 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Actually it's pretty easy to implement with the help of Formik hooks

This is my working solution:

import PhoneInput from "react-phone-number-input";
import { useField } from "formik";

import FieldWrapper from "../FieldWrapper";

const PhoneInputField = ({ label, ...props }) => {
  const [field, meta, helpers] = useField(props.name);

  return (
    <FieldWrapper label={label} meta={meta} {...props}>
      <PhoneInput
        {...props}
        {...field}
        value={field.value}
        defaultCountry="NO"
        onChange={(value) => {
          helpers.setValue(value);
        }}
      />
    </FieldWrapper>
  );
};

export default PhoneInputField;

Then use this ponent in your Formik Form as so

// your boilerplate code ect...

<Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
     {({ handleSubmit, isSubmitting }) => (    
            <FieldPhoneInput
              label="Phone Number"
              name="phone"
              type="tel"
              placeholder="Write your phone number here"
            />
     )}
</Formik>

本文标签： javascriptHow to friend Formik with reactphonenumberinput libStack Overflow