Using text-mask with Ant design Input component

Hi guys,

I have been testing this library to implement my personal project. And as you understand from the title, I want to use this component together with ant design Input component using its render attribute. However, it doesn’t work with that.

 <TextMask
        mask={[/[12]/, /\d/, /\d/, /\d/, "-", /[01]/, /\d/, "-", /[0-3]/, /\d/]}
        placeholderChar="_"
        showMask
        render={(ref, props) => (
          <Input
            name="phone"
            className="form-control"
            placeholder="Hey I am Ant design Input"
            required
            ref={ref}
            {...props}
          />
        )}
      />

If I change the <Input> tag with <input> It shows formatted text like we expect.

My main intention to show every input component should be displayed like an ant design component.

You can make it using react-input-mask library.

[theRafaelThinassi]

Just set de className like this: className=“ant-input”

[FrenchMajesty]

@Stackout What antd version are you on?

I tried implementing your solution but I could not get the masking to go through.

// Package.json
{
  "antd": "3.19.6",
  "react-text-mask": "5.4.3",
}

Also how are you implementing your form logic? Are you passing down the form prop from the parent or is it the one from the decorator Form.create()(Input) ? How are you handling the field validation with that phone number input?

EDIT:

After spending some time playing around and digging into how getFieldDecorator and Input work; I was able to figure out something that works under the versions I have (latest as of July 2019).

Here is a gist of the PhoneNumberInput I created: https://gist.github.com/FrenchMajesty/6758013397e065a831211879423818fd

And it would simply be used as follow:

<Form.Item label="Phone number">
    {this.props.form.getFieldDecorator('number', {
        initialValue: number,
        rules: [
            {required: true, whitespace: true, message: 'Please enter your phone number.'},
        ],
    })(
        <PhoneNumberInput placeholder="Enter your phone number" maxLength={14} />
    )}	
</Form.Item>

I designed the PhoneNumberInput component to work well specifically within a Form but I’m sure it can be tweaked depending on use case.