Как показать предупреждение с ошибками, найденными после отправки формы Formik в реагировать родной - PullRequest
Новая
       8

Как показать предупреждение с ошибками, найденными после отправки формы Formik в реагировать родной

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

У меня есть Formik форма в react native и Yup validationSchema. Когда пользователь отправляет форму, я хочу создать предупреждение с полями ошибок, если есть поля, которые являются недействительными. 

Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1",

Я попытался использовать isValid внутри Formik рендера и создать предупреждение с ошибками, но я получаю пустой объект ошибок. Однако, если я отправляю снова или нажимаю «Отправить» дважды, объект ошибки содержит неверные поля, как и ожидалось.

Как получить объект ошибок при первой отправке?

Ответы [ 2 ]

0 голосов
/ 15 июля 2019

То, что вы должны сделать, это иметь модальное или что-то подобное, которое будет отображать ошибки.

При использовании Formik тот компонент, который вы визуализируете (вы можете использовать component, render, а также children), получит реквизит с ошибками, как вы можете видеть в примере из документов . 

<Formik>                              {// getting the errors here }
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

errors будет объектом, поэтому вы проверяете keys (или вы также можете использовать values) из errors и решаете, будете ли вы отображать ошибку модально или нет. 

<Formik
    validationSchema={yourValidationSchema}
    onSubmit={whatYouWantTodoWhenEverythingIsGood}
    initialValues={{ email: '' }}
>                                 
    {({ errors, values, handleChange, handleBlur}) => (
        <View>
            <TextInput
                onChangeText={handleChange('email')}
                onBlur={handleBlur('email')}
                value={values.email}
            />
            <Button onPress={props.handleSubmit} title="Submit" />
            {// checking if you have errors}
            {
                Object.keys(errors).length > 0 && 
                    <Modal errors={errors}/>
            }
        </View>
  )}
</Formik>

В зависимости от того, откуда ваш модал, вы можете использовать <Modal isActive={Object.keys(errors).length > 0} errors={errors}/> или другие подобные вещи.

например. используя реагирующий нативный модал 

<Modal
    visible={Object.keys(errors).length > 0}
>
        <View>
            {// show the errors the way you want}
        </View>
</Modal>

Вы должны использовать Object.keys(errors).length > 0, чтобы решить, показывать ли вам модальное значение с errors или нет.

0 голосов
/ 15 июля 2019

Это потому, что затронутый объект не обновляется при нажатии кнопки отправки, когда вы находитесь в RN. Попробуйте установить пустые значения в качестве начальных значений для ваших полей, которые имеют схему проверки. Примерно так: 

initialValues={{ input_1: "", input_2: "" }}

Этот ответ из репозитория formik git мне помог.

...