sanniassin / react-input-mask

Input masking component for React. Made with attention to UX.
MIT License
2.24k stars 255 forks source link

Mask for license plates #296

Closed Nero-o closed 2 years ago

Nero-o commented 2 years ago

I'm trying to implement a mask that receives two types of license plates, I tried to add another pattern but I didn't get the result I wanted, when removing the mask the placeholder disappears

    ...  {
            pattern: /^([a-zA-Z]{3}[0-9][0-9a-zA-Z][0-9]{2})$/,
            message: intl.formatMessage({ id: 'app.patrimony.licensePlate.pattern' }),
          },
          {
            pattern: /^([a-zA-Z]{2}[0-9]{3})$/,
            message: intl.formatMessage({ id: 'app.patrimony.licensePlate.pattern'}),

          }
    <ReactInputMask
          name="licensePlate"
          maskChar="_"
          style={{ width: '100%' }}
        >
          {() => {
            return (
              <Input
                style={{ width: '328px' }}
                placeholder={intl.formatMessage({
                  id: 'app.patrimony.registryNumber.placeholder',
                })}
              />
            );
          }}
        </ReactInputMask>
Nero-o commented 2 years ago

I solved the problem, removed the mask and mask Char properties and just changed the pattern to: pattern: /^([a-zA-Z]{3}[0-9][0-9a-zA-Z]{1}[0-9]{2})$/,