CODEWITHSUNDEEP
javascriptreactjsmaterial-uiformikinput-mask
Omar Hussein
Omar Hussein

Reputation: 1147

Store unmasked InputMask value in Formik and Material-UI

Alright, so I have this implementation of Input Mask over a custom styled implementation of Material UI's text field, inside a Formik form:

<InputMask
                        mask="999-99-9999"
                        maskChar="X"
                        value={values.ssn}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        className={classNames(
                          styles.inputField,
                          styles.override
                        )}
                      >
                        {() => (
                          <LNTextField
                            name="ssn"
                            label="Social Security Number"
                            error={touched.ssn && errors.ssn ? true : false}
                            helperText={
                              touched.ssn && errors.ssn ? "* " + errors.ssn : ""
                            }
                            type="text"
                          />
                        )}
                      </InputMask>

The problem now is that in values.ssn the value is stored with the mask, with the hyphens and all, I would instead like it to be stored as a number/string with no spaces/masks, how would I go about that?

Upvotes: 2

Views: 1575

Answers (1)

Omar Hussein
Omar Hussein

Reputation: 1147

Per @Kiran LM 's comment codesample, this was acheived by adding this instead of the existing onChange, aswell as destructuring setFieldValue from Formik

                      onChange={e => {
                        const value =
                          e.target.value
                            .replace(/-/g, "")
                            .replace(/X/g, "") || "";
                        setFieldValue("ssn", value);
                      }}

Many thanks to them.

Upvotes: 2

Related Questions