Как правильно проверить маскированный ввод, используя material-ui, formik, yup и response-input-mask? - PullRequest
Новая
       67

Как правильно проверить маскированный ввод, используя material-ui, formik, yup и response-input-mask?

0 голосов
/ 20 января 2019

Я пытаюсь проверить свой ввод, используя formik / yup / material-ui / и response-input-mask. Из validationSchema правильно работает только один вариант: .required. Когда я пытаюсь проверить по минимальной / максимальной длине на входе, он не работает должным образом.

Когда я устанавливаю маску для ввода, равную: {"99 9999"}, это выглядит как yup распознает его как 7 символов (6 цифр и один для пробела), и это не меняется, когда я печатаю в поле ввода ,

Например, когда я установил: .min(7, "Password must contain at least 7 characters")

в validationSchema Я всегда получаю никаких ошибок, даже если я ничего не набираю в текстовом поле.

И когда я установлю min(8, "Password must contain at least 8 characters") , я всегда получаю сообщение об ошибке, даже если что-то напишу. Похоже, длина входных данных всегда равна длине маски.

Есть мое поле ввода: 

 <InputMask
    mask={"99 9999"}
    value={name}
    onChange={change.bind(null, "name")}
  >
    {() => (
      <TextField
        id="name"
        name="name"
        variant="outlined"
        helperText={touched.name ? errors.name : ""}
        error={touched.name && Boolean(errors.name)}
        label="Name"
        fullWidth
      />
    )}
 </InputMask>

И там вы можете увидеть весь мой код:

https://codesandbox.io/s/zrrxol5614

Что я делаю не так?

...