rc-field-form

npm install
npm start
open http://localhost:8000

import Form, { Field } from 'rc-field-form';

const Input = ({ value = '', ...props }) => <input value={value} {...props} />;

const Demo = () => {
  return (
    <Form
      onFinish={values => {
        console.log('Finish:', values);
      }}
    >
      <Field name="username">
        <Input placeholder="Username" />
      </Field>
      <Field name="password">
        <Input placeholder="Password" />
      </Field>

      <button>Submit</button>
    </Form>
  );
};

export default Demo;

const Demo = () => {
  const [form] = Form.useForm();
  return <Form form={form} />;
};
``

Для пользователей классовых компонентов вы можете использовать `ref`, чтобы получить экземпляр формы:

```jsx | pure
class Demo extends React.Component {
  setRef = form => {
    // Экземпляр формы здесь
  };
}  render() {
    return <Form ref={this.setRef} />;
  }
}
```| Свойство              | Описание                                | Тип                                                                       |
| ----------------- | ------------------------------------------ | -------------------------------------------------------------------------- |
| getFieldValue     | Получить значение поля по пути имени       | (name: [NamePath](#namepath)) => any                                       |
| getFieldsValue    | Получить список значений полей по списку путей имен | (nameList?: ([NamePath](#namepath)[]) => any) \| true                      |
| getFieldError     | Получить ошибки поля по пути имени        | (name: [NamePath](#namepath)) => string[]                                  |
| getFieldsError    | Получить список ошибок полей по списку путей имен | (nameList?: [NamePath](#namepath)[]) => FieldError[]                       |
| isFieldsTouched   | Проверить, были ли поля коснуты           | (nameList?: [NamePath](#namepath)[], allTouched?: boolean) => boolean      |
| isFieldTouched    | Проверить, был ли коснут определенный поле | (name: [NamePath](#namepath)) => boolean                                   |
| isFieldValidating | Проверить, валидируется ли поле            | (name: [NamePath](#namepath)) => boolean                                   |
| resetFields       | Сбросить статус полей                     | (fields?: [NamePath](#namepath)[]) => void                                 |
| setFields         | Установить статус полей                   | (fields: FieldData[]) => void                                              |
| setFieldsValue    | Установить значение полей                  | (values) => void                                                          |
| submit            | Вызвать отправку формы                    | () => void                                                                |
| validateFields    | Вызвать валидацию полей                    | (nameList?: [NamePath](#namepath)[], options?: ValidateOptions) => Promise |### FormProvider| Проп | Описание | Тип | Значение по умолчанию |
| ---------------- | ----------------------------------------- | ---------------------------------------- | ------- |
| validateMessages | Конфигурация глобального шаблона `validateMessages` | [ValidateMessages](#validatemessages) | -       |
| onFormChange     | Вызывается при изменении именованных полей формы | (name, { changedFields, forms }) => void | -       |
| onFormFinish     | Вызывается при завершении именованных полей формы | (name, { values, forms }) => void | -       |

## 📋 Интерфейс

### NamePath

| Тип                                     |
| ---------------------------------------- |
| string \| number \| (string \| number)[] |

### FieldData

| Проп | Тип                                     |
| ---------- | ---------------------------------------- |
| touched    | boolean                                  |
| validating | boolean                                  |
| errors     | string[]                                 |
| name       | string \| number \| (string \| number)[] |
| value      | any                                      |### Правило | Свойство        | Тип                                                                                            |
| --------------- | ----------------------------------------------------------------------------------------------- |
| enum            | any[]                                                                                           |
| len             | number                                                                                          |
| max             | number                                                                                          |
| message         | string                                                                                          |
| min             | number                                                                                          |
| pattern         | RegExp                                                                                          |
| required        | boolean                                                                                         |
| transform       | (value) => any                                                                                  |
| type            | string                                                                                          |
| validator       | ([rule](#rule), value, callback: (error?: string) => void, [form](#useform)) => Promise \| void |
| whitespace      | boolean                                                                                         |
| validateTrigger | string \| string[]                                                                              |

#### ВалидаторЧтобы сохранить синхронизацию с устаревшим использованием `validator` в `rc-form`, мы все еще предоставляем `callback` для запуска завершения валидации. Однако в `rc-field-form` мы настоятельно рекомендуем возвращать Promise вместо этого.

### Список операций

| Параметр | Тип                     |
| -------- | ----------------------- |
| add      | (initValue: any) => void |
| remove   | (index: number) => void  |

### Сообщения об ошибках

Сообщения об ошибках предоставляют список шаблонов ошибок. Вы можете посмотреть [здесь](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) для полного списка шаблонов по умолчанию.

| Параметр | Описание         |
| -------- | --------------- |
| enum     | Параметр `enum` правила |
| len      | Параметр `len` правила |
| max      | Параметр `max` правила |
| min      | Параметр `min` правила |
| name     | Имя поля          |
| pattern  | Параметр `pattern` правила |
| type     | Параметр `type` правила |

## Отличия от `rc-form`

`rc-field-form` пытается сохранить синхронизацию с `rc-form` на уровне API, но все же есть некоторые изменения:

### 1. Поле не будет синхронизироваться с `initialValues`, если оно не было изменено

В `rc-form` значение поля берется из `initialValues`, если пользователь не изменил его.
Это ошибка, но пользователи используют это как функцию, что делает исправление этой ошибки разрывом совместимости и мы должны сохранить это.
В `Field Form` эта ошибка больше не будет существовать. Если вы хотите изменить значение поля, используйте `setFieldsValue` вместо этого.### 2. Удаление поля не очистит связанное значение

Мы реализовали много логики для очистки значения при удалении поля. Однако, учитывая обратную связь пользователей, удаление существующего значения увеличивает дополнительную работу для возврата значения при условных полях.

### 3. Использование массива вместо строки для вложенных имен

В `rc-form` мы поддерживали имена вроде `user.name`, преобразуя значение в `{ user: { name: 'Bamboo' } }`. Это делает точку всегда маршрутом переменной, что заставляет разработчиков выполнять дополнительную работу, если имя действительно содержит точку, например `app.config.start` должно быть `app_config_start` и парситься обратно в точку при отправке.

`Field Form` будет использовать массив, например `['user', 'name']` для преобразования в `{ user: { name: 'Bamboo' } }`, и `user.name` для преобразования в `{ ['user.name']: 'Bamboo' }`.

### 4. Удаление `validateFieldsAndScroll`

Так как `findDomNode` помечен как предупреждение в [StrictMode](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). Это кажется избыточным контролем над компонентом формы.
Мы решили удалить метод `validateFieldsAndScroll` и вы должны обрабатывать это самостоятельно.

```jsx
<Форма>
  <Поле name="username">
    <input ref={this.inputRef} />
  </Поле>
</Форма>

if (errors === null) {
  errors = [];
}
``````js | pure
(form.getFieldsError('fieldName') || []).forEach(() => {
  // Do something...
});

async function() {
  try {
    const values = await form.validateFields();
    console.log(values);
  } catch (errorList) {
    errorList.forEach(({ name, errors }) => {
      // Do something...
    });
  }
}