Use react-input-mask with antd in react-final-form

Question

I would like to use react-input-mask with Ant Design Input in react-final-form. In order to use antd with react-final-form I also had to install redux-form-antd. So the file looks like this:

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "antd";
import { Form, Field } from "react-final-form";
import InputMask from "react-input-mask";
import { TextField } from "redux-form-antd";
import "antd/dist/antd.css";

const onSubmit = async values => {
  window.alert(JSON.stringify(values, 0, 2));
};

const Input = props => <InputMask {...props} />;

function App() {
  return (
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit, values }) => (
        <form onSubmit={handleSubmit}>
          <Field
            name="mask"
            parse={value =>
              value
                .replace(/\)/g, "")
                .replace(/\(/g, "")
                .replace(/-/g, "")
                .replace(/ /g, "")
            }
            render={({ input, meta }) => (
              <div>
                <label>mask phone</label>
                <Input mask="+7 (999) 999-99-99" {...input} />
                {meta.touched && meta.error && <span>{meta.error}</span>}
              </div>
            )}
          />
          <Field
            name="antd"
            component={TextField}
            label="antd phone"
            placeholder="Phone"
          />
          <Button className="submit-button" type="primary">
            Send
          </Button>
          <pre>{JSON.stringify(values, 0, 2)}</pre>
        </form>
      )}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is a codesandbox example.

I could only get to work a regular input with an InputMask (input 1) or an antd input without a mask (input 2).

How can I add an InputMask to antd input?

Answer 1

I've managed to use react-input-mask with antd and react-final-form without any external libraries.

Here is my component:

import React from "react";
import InputMask from "react-input-mask";
import { Input } from "antd";
import FormItem from "antd/lib/form/FormItem";

const MaskInput = props => {
  const { disabled, mask, label, meta, required } = props;
  return (
    <FormItem
      label={label}
      validateStatus={
        meta.touched ? (meta.error ? "error" : "success") : undefined
      }
      help={meta.touched ? (meta.error ? meta.error : undefined) : undefined}
      hasFeedback={meta.touched ? true : false}
      required={required}
    >
      <InputMask
        mask={mask}
        disabled={disabled}
        autoComplete="off"
        {...props.input}
      >
        <Input />
      </InputMask>
    </FormItem>
  );
};

export default MaskInput;

Then it is passed to the component prop of the Field:

<Field
  name="phone"
  label="Phone"
  component={MaskInput}
  mask="+7 (999) 999-99-99"
  required
/>

Here is the link to the codesandbox example.