A-Level. React. Forms.

Forms

Теми

  1. Прицювати з формами
  2. Валідувати значення
  3. Formik
  4. Навчитеся писати валідаційні схеми

Formik.



Build forms in React, without the tears.

Install

npm install formik

Connect

            import { useFormi, Formik } from 'formik';
             
            <Formik>
              {(formik) => (...)}
            </Formik>

Обовʼязкові props

            const onSubmit = (values, actions) => { ... };
            const initialValues = { email: '', password: '' };
             
            <Formik initialValues={initValues} onSubmit={onSubmit}>

Підключаємо інпут

            <Input
              name='email'
              placeholder='email'
              value={formik.values.email}
              onBlur={formik.handleBlur}
              onChange={formik.handleChange}
            />

Валідація

Обробляємо помилки валідації даних та повертаємо об'єкт зі списком помилок

            const onValidate = (values) => {
              const errors = {};
              if (!values.email) {
                errors.email = 'email require';
              }
              return errors;
            }
            <Formik validate={onValidate}>...</Formik>

Відображення помилок

            <Formik ...>
              {(formik) => (
                <Input name='email' ... />
                {(formik.touched.email && formik.errors.email) && (
                  <div type='danger'>{errors.email}</div>
                )}
              )}
            </Formik>

Валідація з Yup

npm install yup - інстаюємо

Описуємо схему валізації:
            const validationSchema = yup.object().shape({
              email: yup.string().required().email(),
            });
            <Formik ... validationSchema={validationSchema}>

useFormik

            const formik = useFormik({ initialValues, onSubmit, validationSchema });
            <form onSubmit={formik.handleSubmit}>
              <Input
                name='email'
                placeholder='email'
                value={formik.values.email}
                onBlur={formik.handleBlur}
                onChange={formik.handleChange}
              />
              {formik.errors.email && <div type='danger'>{formik.errors.email}</div>}

Task 1.

  1. Створюємо форму реєсрації:
    • поля: firstName, lastName, email, password, confirmPassword, agree
    • всі поля обовʼязкові
    • password - мінімум 3 символа, максимум - 10
    • agree - угода, без чекбокса не пускаємо далі

Links