search

Availity / availity-reactstrap-validation

Easy to use React validation components compatible for reactstrap.
https://availity.github.io/availity-reactstrap-validation/
MIT License
191 stars 70 forks source link

Is there a way to use react-input-mask with validating fields? #107

Closed lawrenz1337 closed 5 years ago

lawrenz1337 commented 5 years ago

react-input-mask uses the same parameter tag as AvField for CustomInput from reactstrap. They override eachother and default input is rendered istead

TheSharpieOne commented 5 years ago

I have a PR up, it should allow you to do something like:

  <AvField tag={[CustomInput, ReactInputMask]} ... />

to have AvField render a CustomInput with a tag of ReactInputMask

lawrenz1337 commented 5 years ago

@TheSharpieOne Thanks for you PR! But it doesn't seem to work yet... You can check my example here https://stackblitz.com/edit/react-dw17ff?file=Hello.js

nicobailon commented 5 years ago

@TheSharpieOne I can also confirm that this does not seem to work. I tweaked @lawrenz1337's example here: https://stackblitz.com/edit/react-j7bf9e and I'm seeing: Error in /turbo_modules/availity-reactstrap-validation@2.5.0/lib/AvInput.js (85:12) tags is not defined

GoPro16 commented 5 years ago

@nicobailon I am not sure you pasted your version correctly. I am seeing the same code as what @lawrenz1337 pasted.

Also the prop name is tag without the s.

TheSharpieOne commented 5 years ago

the error about tags is coming from this lib. There is an unreleased fix: #112. @GoPro16 can you or @robmcguinness cut a new release to include that fix?

nicobailon commented 5 years ago

@GoPro16 apologies. I have fixed the link.

robmcguinness commented 5 years ago

I'll release shortly

GoPro16 commented 5 years ago

Just released @2.5.1

henrique-barreto commented 5 years ago

Can we get a working example of how to use input maks?

TheSharpieOne commented 5 years ago

@henrique-barreto check out https://stackblitz.com/edit/react-8smaux?file=Hello.js

        <AvForm>
          <AvField
            label="Phone Number"
            type="tel"
            mask="(999) 999-9999"
            maskChar="-"
            name='Test'
            tag={[Input, InputMask]}
            required
            helpMessage="Valid NANP phone number cannot start with a 1"
          />
        </AvForm>