¿Es posible usar un complemento de entrada de máscara (como react-text-mask) con Formik?
Sí, simplemente trátelo como cualquier otra entrada personalizada.
@jaredpalmer gracias. Lo he descubierto aquí. Si alguien quiere ver cómo lo hice (usando react-text-mask
):
input = <Field name={name} render={({ field }) => {
return <MaskedInput mask={Masks[mappedField.mask]}
{...field}
id={name}
placeholder={mappedField.placeholder[language]} />
}} />
@ThiagoMiranda ¿cómo
Por ejemplo, con este sí:
passport: yup
.string()
.matches(/(^[0-9]+$)/, 'only digits here')
.required('enter something')
.min(4, 'Number of digits left: ' + digitsLeft)
.max(4, 'This is too much')
obtengo el valor "0___" y no puedo validar las reglas mínimas máximas.
Como es que esto no funciona
Veo la entrada enmascarada y su enmascaramiento y renderizado bien, pero cuando estoy escribiendo valores, enmascarado no se actualiza, aunque tengo un nombre en el campo.
Porque Field
pasa un field
prop, que MaskedInput
no se asigna correctamente a los controladores.
Okey, así que el accesorio de campo no incluye todos los accesorios desconocidos de Field
@yyynnn : he tenido el mismo problema. Terminé creando un controlador de cambios personalizado que elimina los caracteres de la máscara y las llamadas manuales de Formik setFieldValue
.
handleChange = (event, field, form, charsToStrip) => {
const cleanValue = stripCharacters(event.target.value, charsToStrip)
form.setFieldValue(field.name, cleanValue)
}
function stripCharacters (string, characters) {
const re = new RegExp(`[${characters}]+`, 'g')
return string.replace(re, '')
}
@ThiagoMiranda ¿cómo
...
obtengo el valor "0___" y no puedo validar las reglas mínimas máximas.
Por favor, vea otro ejemplo https://codesandbox.io/s/4rkyylp24w
@jaredpalmer gracias. Lo he descubierto aquí. Si alguien quiere ver cómo lo hice (usando
react-text-mask
):este trabajo para mi tambien
<Field name='telefone' > {({ field }) => ( <MaskedInput mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} {...field} placeholder='Telefone' className="form-control" /> )} </Field>
Comentario más útil
@jaredpalmer gracias. Lo he descubierto aquí. Si alguien quiere ver cómo lo hice (usando
react-text-mask
):