CODEWITHSUNDEEP
reactjsformik
angry kiwi
angry kiwi

Reputation: 11475

how to use react number format with formik

My formik form is like this

const NewProduct = ({}) => {
    const validate = (values) => {
        const errors = {}
        if (!values.title) {
            errors.title = 'Required'
        }
        return errors
    }
    const formik = useFormik({
        initialValues: {
            title: '',
            price: '',
        },
        validate,
        onSubmit: (values) => {
            alert(JSON.stringify(values, null, 2))
        },
    })

    return (
        <div className="newProductComponent">
            <form onSubmit={formik.handleSubmit}>
                <label>title</label>
                <input
                    type="text"
                    id="title"
                    name="title"
                    onChange={formik.handleChange}
                    value={formik.values.title}
                />
                {formik.errors.title ? (
                    <div className="error">{formik.errors.title}</div>
                ) : null}

                <NumberFormat
                    value={formik.values.price}
                    thousandSeparator={true}
                    onValueChange={(values) => {
                        const { formattedValue, value } = values
                    }}
                />
            </form>
        </div>
    )
}

How can I get number format component in that form to work with formik?

Upvotes: 2

Views: 5948

Answers (3)

IraMira333
IraMira333

Reputation: 1

I had the same problem and solved it like this:

function NumberFieldHooks(props) {
const { name } = props;
const [field] = useField(name);

return (
  <NumericFormat
    {...field}
    decimalScale={3}
    thousandSeparator={true}
    onValueChange={values => {
      console.log(values);
      const { floatValue } = values;

      formik.setFieldValue(field.name, floatValue);
    }}
  />
);}

And put it in my Formik-form:

<div>
                  <label>From</label>
                  <div
                    style={{
                      paddingLeft: '70px',
                    }}
                  >
                    <NumberFieldHooks
                      name="mileageFrom"
                      type="number"
                      min="0"
                      value={formik.values.mileageFrom}
                    />
                  </div>
                </div>

Upvotes: 0

Ro Milton
Ro Milton

Reputation: 2536

useFormik - the hook you're already using - returns a function setFieldValue that can be used to manually set a value.

First arg is field name price and second is the value. You also must set attribute name="price" on <NumberFormat>.

const App = () => {
  const validate = (values) => {
      const errors = {}
      if (!values.title) {
          errors.title = 'Required'
      }
      return errors
  }
  const formik = useFormik({
      initialValues: {
          title: '',
          price: '',
      },
      validate,
      onSubmit: (values) => {
          alert(JSON.stringify(values, null, 2))
      },
  })

  return (
      <div className="newProductComponent">
          <form onSubmit={formik.handleSubmit}>
              <label>title</label>
              <input
                  type="text"
                  id="title"
                  name="title"
                  onChange={formik.handleChange}
                  value={formik.values.title}
              />
              {formik.errors.title ? (
                  <div className="error">{formik.errors.title}</div>
              ) : null}
              <br />
              <label>Price</label>
              <NumberFormat
                  name="price"
                  value={formik.values.price}
                  thousandSeparator={true}
                  onValueChange={(values) => {
                      const {  value } = values;
                      formik.setFieldValue('price', value);
                  }}
              />
              <br />
              <button type="submit">Submit</button>
          </form>
      </div>
  )
};

Live Demo

Upvotes: 3

onlit
onlit

Reputation: 778

You can set the values using useField and useFormikContext

example:

const [field, meta] = useField('price');
const { setFieldValue } = useFormikContext();

const isError = meta.touched && Boolean(meta.error);

<NumberFormat
  value={formik.values.price}
  thousandSeparator={true}
  onValueChange={(values) => {
      const { formattedValue, value } = values

      setFieldValue(field.name, formattedValue)
  }}
/>

{isError && <div className="error">{meta.error}</div>}

Upvotes: 1

Related Questions