Как правильно выполнить валидацию вложенных объектов с использованием effector-forms?

Как использовать форму для валидации с вложенными объектами, например, с таким объектом:

{
  user: {
    name: string;
    password: string;
  },
  password: string;
}

в документации effector-forms?
  • 24 октября 2023 г. 12:50
Ответы на вопрос 1
В effector-forms валидация вложенных объектов может быть выполнена с использованием метода `object`, который принимает спецификации для каждого поля вложенного объекта.

Ниже приведен пример, как использовать форму для валидации объекта со вложенными полями:

```javascript
import { createForm } from 'effector-forms';

const form = createForm({
  fields: {
    user: {
      fields: {
        name: 'John',
        password: 'password',
      },
      validate: ({ name, password }) => {
        const errors = {};

        if (!name) {
          errors.name = 'Введите имя пользователя';
        }

        if (!password) {
          errors.password = 'Введите пароль';
        }

        return errors;
      },
    },
    password: '',
  },
});
```

В данном примере мы создаем форму с полями "user" и "password". Внутри поля "user" мы определяем вложенные поля "name" и "password" с их начальными значениями. 

Для валидации вложенного объекта "user" мы используем функцию `validate`, которая принимает объект с полями "name" и "password" и возвращает объект с ошибками валидации (если они есть). Например, если поле "name" пустое, то возвращается объект с ошибкой `{ name: 'Введите имя пользователя' }`.

После определения формы, вы можете использовать ее в компоненте React, например, в таком виде:

```javascript
import React from 'react';
import { useStore } from 'effector-react';
import { form } from './form'; // импортируйте созданную форму

const MyComponent = () => {
  const { fields } = useStore(form);

  return (
    <form>
      <div>
        <label>Имя пользователя:</label>
        <input type="text" {...fields.user.fields.name.props} />
        {fields.user.fields.name.errors && (
          <div>{fields.user.fields.name.errors}</div>
        )}
      </div>
      <div>
        <label>Пароль:</label>
        <input type="password" {...fields.user.fields.password.props} />
        {fields.user.fields.password.errors && (
          <div>{fields.user.fields.password.errors}</div>
        )}
      </div>
      <div>
        <label>Повторите пароль:</label>
        <input type="password" {...fields.password.props} />
        {fields.password.errors && <div>{fields.password.errors}</div>}
      </div>
      <button type="submit">Отправить</button>
    </form>
  );
};
```

В этом компоненте мы получаем `fields` из хранилища формы и используем их для привязки значений полей и отображения ошибок. Каждому полю присваивается значение из `fields.user.fields.name.props`, `fields.user.fields.password.props`, `fields.password.props`. Ошибки валидации представлены в `fields.user.fields.name.errors`,  `fields.user.fields.password.errors` и `fields.password.errors`.

Надеюсь, это поможет вам выполнить валидацию вложенных объектов с использованием effector-forms. Удачи!
Похожие вопросы