MichaelCereda / react-native-form-generator

Generate forms with native look and feel in a breeze
MIT License
377 stars 105 forks source link

Set mask into inputField #96

Open leonciocaminha opened 7 years ago

leonciocaminha commented 7 years ago

Hi!

when i try apply one mask into a field, for formatting the input example:

when i enter the data: 00000000000 i have change the inputField to display: 000.000.000-00

but when i try this using onValueChange refs.userDataForm.refs.cpf.setValue(cpfFormatted)

i enter into a loop...

      `<InputField
        label={Translations.app["userData"]["form"]["cpf"]}
        ref='cpf'
        keyboardType={"numeric"}
        placeholder={Translations.app["userData"]["form"]["cpf_example"]}
        onValueChange={(value) => this._cpfMask(value, this)}
      />`

cpfMask(value, element) { const cpf = value.replace(/\D/g,''); var cpfFormatted = '' switch (cpf.length) { case 3: cpfFormatted = cpf.substring(0, 3) + '.' break; case 6: cpfFormatted = cpf.substring(0, 3) + '.' + cpf.substring(3, 6) + '.' break; case 9: cpfFormatted = cpf.substring(0, 3) + '.' + cpf.substring(3, 6) + '.' + cpf.substring(6, 9) break; case 11: cpfFormatted = cpf.substring(0, 3) + '.' + cpf.substring(3, 6) + '.' + cpf.substring(6, 9) + '-' + cpf.substring(9, 11) break; default: cpfFormatted = cpf break; } element.refs.userDataForm.refs.cpf.setValue(cpfFormatted) this.setState({formData: {cpf: cpf} }) }