Formik: Entradas mascaradas

Sim, você apenas trata como qualquer outra entrada personalizada.

@jaredpalmer obrigado. Eu descobri isso aqui. Se alguém quiser ver como fiz isso (usando react-text-mask ):

      input = <Field name={name} render={({ field }) => {
        return <MaskedInput mask={Masks[mappedField.mask]}
            {...field}
            id={name}
            placeholder={mappedField.placeholder[language]} />
      }} />

@ThiagoMiranda como você conseguiu validar string mascarada?
Por exemplo, com este yup:

          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')

eu obtenho o valor "0___" e não consigo validar para regras mínimas.

Por que isso não funciona

Eu vejo a entrada mascarada e seu mascaramento e renderização boas, mas quando estou digitando valores. Mascarado não está atualizando, embora eu tenha um nome no campo.

Porque Field passa um field prop, que MaskedInput não mapeia corretamente para manipuladores.

Ok, então a proposta de campo não está incluindo todos os acessórios desconhecidos de campo

@yyynnn - Eu encontrei o mesmo problema. Acabei criando um manipulador de alterações personalizado que remove os caracteres da máscara e chama manualmente o setFieldValue do Formik.

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 como você conseguiu validar string mascarada?
...
eu obtenho o valor "0___" e não consigo validar para regras mínimas.

por favor, veja outro exemplo https://codesandbox.io/s/4rkyylp24w

@jaredpalmer obrigado. Eu descobri isso aqui. Se alguém quiser ver como fiz isso (usando react-text-mask ):

este trabalho para mim também
<Field name='telefone' > {({ field }) => ( <MaskedInput mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} {...field} placeholder='Telefone' className="form-control" /> )} </Field>