Условная проверка ошибок с помощью компонента поля Formik - PullRequest
Новая
       10

Условная проверка ошибок с помощью компонента поля Formik

1 голос
/ 22 сентября 2019

Я настроил следующую форму, используя Formik: 

const RenderForm = ({ errors, isSubmitting, isValid, touched }) => {
  return (
    <Form>
      <h3>Sign Up</h3>
      <Email
        name="email"
        error={touched.email && errors.email ? 'error' : null}
      />
      <Password
        name="password"
        error={touched.password && errors.password ? 'error' : null}
      />
      <Button disabled={!isValid || isSubmitting} type="submit">
        Submit
      </Button>
      {/* {errors.firebaseErrorMessage && ( */}
      {/* <Help>{errors.firebaseErrorMessage}</Help> */}
      {/* )} */}
    </Form>
  )
}

Компонент Email и Password являются просто оболочками для компонента Formik Field.Я хочу иметь возможность добавить красную рамку для определенного поля, если оно не проходит проверку.

Для этого я настроил условие для error проп.Если к нему прикоснуться И, если ошибка пройдена, то он отображает этот реквизит со значением «ошибка».

Теперь есть несколько проблем с этим.

ПЕРВАЯ ПРОБЛЕМА Я не знаюНе нужно отображать значение error (или любое другое значение) в атрибуте error.Мне просто нужно иметь атрибут «ошибка» (без какого-либо значения), и тогда он будет стилизован соответствующим образом.

ВТОРАЯ ПРОБЛЕМА

Немного раздражает писать один и тот же условный тест для каждого поля.Я хотел бы знать, есть ли что-то вроде ErrorMessage компонента, кроме проп.По сути, что-то вроде этого: 

<Email name="email" errorProp />
<Password name="password" errorProp />

Идея состоит в том, что errorProp установит атрибут 'error', если ошибка существует, и ничего, если ошибка не существует.

Таквот мой вопрос ...

Как мне создать свой собственный errorProp или, по крайней мере, упростить то, что я пытаюсь сделать?

Спасибо.

...