@reformer/core 11.0.0-beta.8 → 11.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +91 -73
- package/dist/behaviors-value-HA_Q03hc.js +108 -0
- package/dist/behaviors.js +370 -242
- package/dist/{create-model-BBRHhHwK.js → create-model-BvcbNPgL.js} +6 -6
- package/dist/date-utils-90-qZbse.js +43 -0
- package/dist/{en-CjAqn7h0.js → en-HP8XEych.js} +6 -3
- package/dist/form/aggregate-signals.d.ts +21 -63
- package/dist/form/behaviors/collections.d.ts +28 -7
- package/dist/form/behaviors/context.d.ts +19 -2
- package/dist/form/behaviors/index.d.ts +3 -3
- package/dist/form/behaviors/internals.d.ts +9 -2
- package/dist/form/behaviors/node.d.ts +25 -2
- package/dist/form/behaviors/operators.d.ts +17 -9
- package/dist/form/behaviors/schema-operators.d.ts +6 -4
- package/dist/form/behaviors/types.d.ts +12 -4
- package/dist/form/create-form.d.ts +47 -35
- package/dist/form/flow/flow.d.ts +87 -0
- package/dist/form/form-bundle.d.ts +45 -28
- package/dist/form/form-config-base.d.ts +46 -0
- package/dist/form/form-level.d.ts +121 -0
- package/dist/form/form-proxy-builder.d.ts +6 -22
- package/dist/form/index.d.ts +16 -21
- package/dist/form/nodes/form-array-node.d.ts +100 -0
- package/dist/form/nodes/form-control-node.d.ts +73 -0
- package/dist/form/nodes/form-group-node.d.ts +66 -0
- package/dist/form/nodes/node-kind.d.ts +29 -0
- package/dist/form/nodes/state/availability.d.ts +6 -0
- package/dist/form/nodes/state/component.d.ts +6 -0
- package/dist/form/nodes/state/index.d.ts +12 -0
- package/dist/form/nodes/state/interaction.d.ts +13 -0
- package/dist/form/nodes/state/issues.d.ts +9 -0
- package/dist/form/nodes/state/pending.d.ts +6 -0
- package/dist/form/schema/compile.d.ts +59 -0
- package/dist/form/schema/compiled.d.ts +143 -0
- package/dist/form/schema/row-key.d.ts +11 -0
- package/dist/form/schema-controller.d.ts +30 -14
- package/dist/form/signal-node-registry.d.ts +6 -7
- package/dist/form/submission.d.ts +93 -0
- package/dist/form/type-guards.d.ts +14 -73
- package/dist/form/types/contracts.d.ts +19 -92
- package/dist/form/types/field-config.d.ts +27 -0
- package/dist/form/types/index.d.ts +5 -57
- package/dist/form/types/nodes.d.ts +159 -0
- package/dist/form/types/schema-node.d.ts +139 -63
- package/dist/form/types/validation-schema.d.ts +23 -27
- package/dist/form/validation/context.d.ts +42 -7
- package/dist/form/validation/index.d.ts +9 -8
- package/dist/form/validation/operators.d.ts +22 -30
- package/dist/form/validation/run.d.ts +93 -18
- package/dist/form/validation/strategy.d.ts +41 -13
- package/dist/form/validation/types.d.ts +74 -20
- package/dist/form/validators/date-utils.d.ts +13 -1
- package/dist/form/validators/email.d.ts +8 -7
- package/dist/form/validators/file-type.d.ts +8 -7
- package/dist/form/validators/file-utils.d.ts +2 -1
- package/dist/form/validators/future-date.d.ts +8 -7
- package/dist/form/validators/index.d.ts +1 -1
- package/dist/form/validators/integer.d.ts +8 -7
- package/dist/form/validators/is-date.d.ts +11 -9
- package/dist/form/validators/is-number.d.ts +11 -9
- package/dist/form/validators/max-age.d.ts +13 -9
- package/dist/form/validators/max-date.d.ts +8 -7
- package/dist/form/validators/max-file-size.d.ts +8 -7
- package/dist/form/validators/max-files.d.ts +8 -7
- package/dist/form/validators/max-length.d.ts +14 -7
- package/dist/form/validators/max-total-file-size.d.ts +8 -7
- package/dist/form/validators/max.d.ts +10 -8
- package/dist/form/validators/min-age.d.ts +12 -9
- package/dist/form/validators/min-date.d.ts +8 -7
- package/dist/form/validators/min-file-size.d.ts +8 -7
- package/dist/form/validators/min-files.d.ts +11 -9
- package/dist/form/validators/min-length.d.ts +14 -7
- package/dist/form/validators/min.d.ts +10 -8
- package/dist/form/validators/multiple-of.d.ts +10 -8
- package/dist/form/validators/non-negative.d.ts +8 -7
- package/dist/form/validators/non-zero.d.ts +8 -7
- package/dist/form/validators/past-date.d.ts +8 -7
- package/dist/form/validators/pattern.d.ts +9 -8
- package/dist/form/validators/phone.d.ts +8 -7
- package/dist/form/validators/required.d.ts +11 -9
- package/dist/form/validators/url.d.ts +20 -13
- package/dist/form/validators/validation-issue.d.ts +8 -0
- package/dist/i18n/descriptor.d.ts +1 -1
- package/dist/i18n/en.json.d.ts +5 -1
- package/dist/i18n/locale-store.d.ts +7 -0
- package/dist/i18n/message-format.d.ts +24 -4
- package/dist/i18n/ru.json.d.ts +5 -1
- package/dist/i18n/translator.d.ts +11 -0
- package/dist/i18n/validation-message.d.ts +42 -7
- package/dist/i18n.d.ts +7 -12
- package/dist/i18n.js +66 -283
- package/dist/index.d.ts +16 -7
- package/dist/index.js +924 -2855
- package/dist/loader-BWkigpVe.js +52 -0
- package/dist/locale/en.js +1 -1
- package/dist/locale/en.json +4 -1
- package/dist/locale/ru.js +4 -1
- package/dist/locale/ru.json +4 -1
- package/dist/locale-CG54AU2Q.js +219 -0
- package/dist/locale.js +1 -1
- package/dist/model/behaviors-value.d.ts +24 -6
- package/dist/model/create-model.d.ts +2 -2
- package/dist/model/derived-registry.d.ts +1 -1
- package/dist/model/index.d.ts +11 -5
- package/dist/model/model-nodes.d.ts +79 -12
- package/dist/model/model-signals-proxy.d.ts +5 -6
- package/dist/model/model-value-proxy.d.ts +20 -15
- package/dist/model/safe-effect.d.ts +33 -1
- package/dist/model/types.d.ts +63 -13
- package/dist/model.js +20 -18
- package/dist/node-kind-C-r6ZMdo.js +15 -0
- package/dist/platforms/react/field-binding/field-adapter.d.ts +1 -1
- package/dist/platforms/react/field-binding/field-handle.d.ts +5 -2
- package/dist/platforms/react/form-bundle-context.d.ts +2 -2
- package/dist/platforms/react/hooks/types.d.ts +57 -38
- package/dist/platforms/react/hooks/use-form-bundle.d.ts +19 -4
- package/dist/platforms/react/hooks/use-form-flow.d.ts +40 -0
- package/dist/platforms/react/hooks/use-form-validation.d.ts +12 -6
- package/dist/platforms/react/hooks/useArrayLength.d.ts +6 -6
- package/dist/platforms/react/hooks/useFormControl.d.ts +7 -9
- package/dist/platforms/react/hooks/useFormControlValue.d.ts +18 -19
- package/dist/platforms/react/hooks/useSignalSubscription.d.ts +9 -1
- package/dist/platforms/react/i18n/context.d.ts +6 -1
- package/dist/platforms/react/i18n/hooks.d.ts +16 -10
- package/dist/platforms/react/i18n/provider.d.ts +9 -2
- package/dist/platforms/react/index.d.ts +6 -4
- package/dist/react.d.ts +22 -0
- package/dist/react.js +505 -0
- package/dist/runtime-token.d.ts +1 -2
- package/dist/safe-effect-BbtX3KuN.js +643 -0
- package/dist/schema-controller-CpiO2JoK.js +143 -0
- package/dist/signals.d.ts +15 -9
- package/dist/signals.js +11 -6
- package/dist/strategy-CoFSemuP.js +375 -0
- package/dist/type-guards-D-N_5Ddh.js +19 -0
- package/dist/validation-issue-B9mjI8jz.js +7 -0
- package/dist/validation-message-Ced9MGxs.js +194 -0
- package/dist/validation.js +9 -9
- package/dist/validators/email.js +5 -5
- package/dist/validators/future-date.js +8 -8
- package/dist/validators/integer.js +3 -3
- package/dist/validators/is-date.js +4 -4
- package/dist/validators/is-number.js +4 -4
- package/dist/validators/max-age.js +8 -9
- package/dist/validators/max-date.js +8 -8
- package/dist/validators/max-length.js +7 -7
- package/dist/validators/max.js +4 -4
- package/dist/validators/min-age.js +10 -8
- package/dist/validators/min-date.js +3 -3
- package/dist/validators/min-length.js +5 -5
- package/dist/validators/min.js +4 -4
- package/dist/validators/multiple-of.js +11 -7
- package/dist/validators/non-negative.js +3 -3
- package/dist/validators/non-zero.js +3 -3
- package/dist/validators/past-date.js +8 -8
- package/dist/validators/pattern.js +5 -5
- package/dist/validators/phone.js +11 -9
- package/dist/validators/required.js +2 -2
- package/dist/validators/url.js +48 -12
- package/dist/validators.js +17 -17
- package/docs/llms/01-api-reference.md +60 -34
- package/docs/llms/02-quick-start.md +111 -80
- package/docs/llms/03-api-signatures.md +368 -153
- package/docs/llms/04-common-patterns.md +58 -56
- package/docs/llms/05-common-mistakes.md +69 -44
- package/docs/llms/06-troubleshooting.md +14 -9
- package/docs/llms/07-complete-import.md +74 -43
- package/docs/llms/08-form-types.md +11 -4
- package/docs/llms/09-formschema.md +129 -81
- package/docs/llms/10-arrays.md +106 -75
- package/docs/llms/11-async-watchfield.md +2 -2
- package/docs/llms/13-multi-step.md +134 -63
- package/docs/llms/14-extended-mistakes.md +20 -17
- package/docs/llms/15-project-structure.md +221 -74
- package/docs/llms/16-ui-components.md +55 -42
- package/docs/llms/17-nonexistent-api.md +199 -32
- package/docs/llms/18-conditional-fields.md +66 -32
- package/docs/llms/19-reading-values.md +15 -3
- package/docs/llms/20-compute-vs-watch.md +16 -10
- package/docs/llms/21-array-operations.md +51 -27
- package/docs/llms/22-cycle-detection.md +1 -1
- package/docs/llms/23-copy-from.md +2 -2
- package/docs/llms/24-sync-fields.md +6 -5
- package/docs/llms/25-reset-when.md +14 -7
- package/docs/llms/26-transform-value.md +4 -4
- package/docs/llms/27-revalidate-when.md +16 -15
- package/docs/llms/28-submit-and-reset.md +276 -128
- package/docs/llms/29-async-preload.md +39 -29
- package/docs/llms/30-type-safety-recipes.md +105 -51
- package/docs/llms/31-async-validator-debounce.md +96 -53
- package/docs/llms/33-validation-strategy.md +177 -65
- package/docs/llms/34-i18n.md +69 -43
- package/docs/llms/35-unified-contract.md +100 -39
- package/docs/llms/36-issue-messages.md +284 -0
- package/docs/llms/37-compiled-schema.md +332 -0
- package/docs/llms/38-form-flow.md +397 -0
- package/llms-index.json +1 -1
- package/llms.txt +6084 -3420
- package/package.json +23 -4
- package/dist/behaviors-value-C7dSEhCc.js +0 -134
- package/dist/date-utils-dTT_x_Be.js +0 -31
- package/dist/form/create-core-form.d.ts +0 -72
- package/dist/form/factories/index.d.ts +0 -6
- package/dist/form/factories/node-factory.d.ts +0 -189
- package/dist/form/form-submitter.d.ts +0 -121
- package/dist/form/nodes/array-node.d.ts +0 -276
- package/dist/form/nodes/field-node.d.ts +0 -297
- package/dist/form/nodes/form-node.d.ts +0 -326
- package/dist/form/nodes/group-node.d.ts +0 -284
- package/dist/form/nodes/model-array-node.d.ts +0 -126
- package/dist/form/nodes/subscription-manager.d.ts +0 -180
- package/dist/form/status-machine.d.ts +0 -115
- package/dist/form/types/deep-schema.d.ts +0 -107
- package/dist/form/types/form-proxy.d.ts +0 -141
- package/dist/form/unique-id.d.ts +0 -45
- package/dist/form/validation/config.d.ts +0 -73
- package/dist/form/validation/error-handler.d.ts +0 -166
- package/dist/form/validators/validation-error.d.ts +0 -8
- package/dist/index-BrNkQj1y.js +0 -105
- package/dist/loader-Dv_Hl7JC.js +0 -216
- package/dist/model-value-proxy-caTmAiUd.js +0 -419
- package/dist/node-BeV_lV5i.js +0 -100
- package/dist/strategy-DgzELWno.js +0 -204
- package/dist/validation-error-B-U3RsV0.js +0 -11
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
## 7. FORM TYPE DEFINITION
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Тип описывает форму ДАННЫХ (то, что кладётся в `createModel`), без
|
|
3
|
+
Форму данных объявляй через `interface` или `type`-alias — оба варианта работают одинаково (см.
|
|
4
|
+
`30-type-safety-recipes.md`). Тип описывает форму ДАННЫХ (то, что кладётся в `createModel`), без
|
|
5
|
+
узлов/сигналов.
|
|
5
6
|
|
|
6
7
|
```typescript
|
|
7
8
|
// CORRECT form type definition
|
|
8
|
-
|
|
9
|
+
interface MyForm {
|
|
9
10
|
// Required fields
|
|
10
11
|
name: string;
|
|
11
12
|
email: string;
|
|
@@ -28,7 +29,7 @@ type MyForm = {
|
|
|
28
29
|
id: string;
|
|
29
30
|
name: string;
|
|
30
31
|
}>;
|
|
31
|
-
}
|
|
32
|
+
}
|
|
32
33
|
|
|
33
34
|
// Модель создаётся из initial-значений этого типа
|
|
34
35
|
const model = createModel<MyForm>({
|
|
@@ -45,3 +46,9 @@ const model = createModel<MyForm>({
|
|
|
45
46
|
`number | null` / `string | null` работают со встроенными валидаторами напрямую —
|
|
46
47
|
`min`/`max`/`minLength`/`minDate`/`minAge` пропускают пустые значения внутри, guard `if (v != null)`
|
|
47
48
|
не нужен.
|
|
49
|
+
|
|
50
|
+
Какой ноде формы соответствует поле, решает вид значения: объект — `FormGroup`
|
|
51
|
+
(`form.address.city`), массив объектов — `FormArray` (`form.items.at(0)`), примитив, массив
|
|
52
|
+
примитивов, `Date`, `File` — `FormControl`. Вычисляемые поля (цели `compute`) удобно держать
|
|
53
|
+
отдельным типом и объявлять форму пересечением: `type MyFormFull = MyForm & MyFormDerived` — тогда
|
|
54
|
+
на сервер уходит только ввод (`MyForm`), а вычисляемые ключи отрезаются перед отправкой.
|
|
@@ -1,143 +1,191 @@
|
|
|
1
1
|
## 8. SCHEMA FORMAT (CRITICALLY IMPORTANT)
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
`@reformer/core/validation` и запускаются раннером `validateModel(model, schema)`.
|
|
3
|
+
Схема — **дерево узлов**. Узел привязан к части модели ключом `model` и держит UI-конфиг
|
|
4
|
+
(`component` / `componentProps`). Значения принадлежат модели. Правил валидации в схеме НЕТ — они
|
|
5
|
+
живут в отдельной схеме `defineValidation` из `@reformer/core/validation`.
|
|
7
6
|
|
|
8
|
-
###
|
|
7
|
+
### Четыре вида узла
|
|
8
|
+
|
|
9
|
+
Тип узла — `FormSchemaNode`, закрытый union. Вид определяют ключи `model`, `item`, `part` и
|
|
10
|
+
`children`:
|
|
11
|
+
|
|
12
|
+
| Вид | Ключи | Пример |
|
|
13
|
+
| --------------- | --------------------------------- | --------------------------------------------------- |
|
|
14
|
+
| поле | `model` — лист или массив целиком | `{ model: model.$.email, component: Input }` |
|
|
15
|
+
| массив под-форм | `model` — массив + `item` | `{ model: model.$.phones, item: phoneRow }` |
|
|
16
|
+
| подформа | `model` — группа + `part` | `{ model: model.$.address, part: address }` |
|
|
17
|
+
| контейнер | `children` | `{ component: Section, children: [/* узлы */] }` |
|
|
18
|
+
|
|
19
|
+
Общие ключи любого узла: `component`, `componentProps`, `selector`. У поля ещё `disabled`, у
|
|
20
|
+
массива под-форм — `initialValue` (запасной шаблон новой строки).
|
|
9
21
|
|
|
10
22
|
```typescript
|
|
23
|
+
// Поле
|
|
11
24
|
{
|
|
12
|
-
|
|
25
|
+
model: model.$.fieldName, // ручка значения из model.$ — обязательна
|
|
13
26
|
component: Input, // React-компонент
|
|
14
27
|
componentProps?: object, // пропсы (label, placeholder, options, type, ...)
|
|
15
|
-
disabled?: boolean,
|
|
16
|
-
|
|
17
|
-
debounce?: number,
|
|
28
|
+
disabled?: boolean, // постоянная блокировка поля (вычисляемые total, fullName)
|
|
29
|
+
selector?: string, // имя узла для поведения: schema.node('…')
|
|
18
30
|
}
|
|
19
31
|
```
|
|
20
32
|
|
|
21
|
-
> `
|
|
22
|
-
>
|
|
23
|
-
>
|
|
33
|
+
> **Вложенные узлы читаются только из `children` и из поддерева `part`.** В `componentProps` и под
|
|
34
|
+
> произвольными ключами сборка не заглядывает: узел, положенный туда, полем не станет. В dev
|
|
35
|
+
> сборка предупреждает о ключах узла, которые она не читает.
|
|
36
|
+
|
|
37
|
+
> **Тип закрыт — ошибки ловит компилятор:** опечатка в ключе (`componnet`), группа без `part`,
|
|
38
|
+
> `item` не на массиве, привязка value-фасадом (`model: model.email` вместо `model.$.email`) и
|
|
39
|
+
> узлы под произвольными ключами (`{ email: { model, component } }`) не компилируются.
|
|
40
|
+
|
|
41
|
+
> `disabled` — **ключ узла**, постоянная блокировка: `enable()` группы, массива или формы её не
|
|
42
|
+
> снимает (цикл «выключить форму на время отправки → включить» вычисляемые поля не разблокирует).
|
|
43
|
+
> Снимают её явный `form.field.enable()` и оператор `enableWhen` на этом поле. `componentProps.disabled` — это
|
|
44
|
+
> UI-проп и на состояние поля **не влияет** (частая причина «computed-поле остаётся редактируемым»).
|
|
24
45
|
|
|
25
46
|
### Primitive Fields
|
|
26
47
|
|
|
27
48
|
```typescript
|
|
28
|
-
import { createModel, createFormFromModel } from '@reformer/core';
|
|
29
|
-
import {
|
|
49
|
+
import { createModel, createFormFromModel, type FormSchemaNode } from '@reformer/core';
|
|
50
|
+
import { defineValidation, validate } from '@reformer/core/validation';
|
|
30
51
|
import { required } from '@reformer/core/validators';
|
|
31
52
|
import { Input, InputNumber, SelectAsync, CheckboxWithLabel } from '@reformer/ui-kit';
|
|
32
53
|
|
|
33
54
|
const model = createModel<MyForm>({ name: '', age: null, agree: false, status: 'active' });
|
|
34
55
|
|
|
35
56
|
// Валидация — отдельным слоем (запуск: await validateModel(model, myValidation))
|
|
36
|
-
const myValidation =
|
|
57
|
+
const myValidation = defineValidation<MyForm>(({ model }) => {
|
|
37
58
|
validate(model.$.name, [required()]);
|
|
38
59
|
});
|
|
39
60
|
|
|
40
|
-
const schema = {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
status: {
|
|
57
|
-
value: model.$.status,
|
|
58
|
-
component: SelectAsync,
|
|
59
|
-
componentProps: {
|
|
60
|
-
label: 'Status',
|
|
61
|
-
options: [
|
|
62
|
-
{ value: 'active', label: 'Active' },
|
|
63
|
-
{ value: 'inactive', label: 'Inactive' },
|
|
64
|
-
],
|
|
61
|
+
const schema: FormSchemaNode = {
|
|
62
|
+
children: [
|
|
63
|
+
{
|
|
64
|
+
model: model.$.name,
|
|
65
|
+
component: Input,
|
|
66
|
+
componentProps: { label: 'Name', placeholder: 'Enter name' },
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
model: model.$.age,
|
|
70
|
+
component: InputNumber,
|
|
71
|
+
componentProps: { label: 'Age' },
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
model: model.$.agree,
|
|
75
|
+
component: CheckboxWithLabel,
|
|
76
|
+
componentProps: { label: 'I agree to terms' },
|
|
65
77
|
},
|
|
66
|
-
|
|
78
|
+
{
|
|
79
|
+
model: model.$.status,
|
|
80
|
+
component: SelectAsync,
|
|
81
|
+
componentProps: {
|
|
82
|
+
label: 'Status',
|
|
83
|
+
options: [
|
|
84
|
+
{ value: 'active', label: 'Active' },
|
|
85
|
+
{ value: 'inactive', label: 'Inactive' },
|
|
86
|
+
],
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
],
|
|
67
90
|
};
|
|
68
91
|
|
|
69
92
|
const form = createFormFromModel<MyForm>({ model, schema });
|
|
70
93
|
```
|
|
71
94
|
|
|
72
|
-
|
|
95
|
+
Поле данных может называться как угодно — `value`, `schema`, `form`, `model`, `children`: вид ноды
|
|
96
|
+
определяет узел модели, а не имя.
|
|
73
97
|
|
|
74
|
-
|
|
75
|
-
с `.$`/API). Удобно вынести в builder, принимающий `FormModel<Sub>` — симметрично builder'у элемента
|
|
76
|
-
массива. Сигналы под-модели идентичны корневым: `model.address.$.city === model.$.address.city`.
|
|
98
|
+
### Nested Objects — подформа `{ model, part }`
|
|
77
99
|
|
|
78
|
-
|
|
79
|
-
|
|
100
|
+
Вложенная группа модели — под-модель `FormModel<Sub>`. Её разметку объявляют один раз функцией от
|
|
101
|
+
под-модели и подключают к группе узлом-подформой. Привязки внутри части идут через `$` полученной
|
|
102
|
+
под-модели:
|
|
80
103
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
104
|
+
```typescript
|
|
105
|
+
import type { FormModel, FormSchemaNode } from '@reformer/core';
|
|
106
|
+
|
|
107
|
+
const address = (model: FormModel<Address>): FormSchemaNode => ({
|
|
108
|
+
children: [
|
|
109
|
+
{ model: model.$.street, component: Input, componentProps: { label: 'Street' } },
|
|
110
|
+
{ model: model.$.city, component: Input, componentProps: { label: 'City' } },
|
|
111
|
+
{ model: model.$.zip, component: Input, componentProps: { label: 'ZIP' } },
|
|
112
|
+
],
|
|
85
113
|
});
|
|
86
114
|
|
|
87
|
-
const schema = {
|
|
88
|
-
|
|
115
|
+
const schema: FormSchemaNode = {
|
|
116
|
+
children: [
|
|
117
|
+
// Одна часть подключается к любой группе той же формы данных — сколько угодно раз.
|
|
118
|
+
{ model: model.$.registrationAddress, part: address },
|
|
119
|
+
{ model: model.$.residenceAddress, part: address },
|
|
120
|
+
],
|
|
89
121
|
};
|
|
90
122
|
```
|
|
91
123
|
|
|
92
|
-
|
|
124
|
+
Поля группы можно привязать и напрямую, без подформы:
|
|
125
|
+
`{ model: model.$.address.city, component: Input }`.
|
|
93
126
|
|
|
94
|
-
|
|
95
|
-
|
|
127
|
+
### Arrays — массив под-форм `{ model, item }`
|
|
128
|
+
|
|
129
|
+
`item` строит разметку строки из под-модели строки (`FormModel<Item>`):
|
|
96
130
|
|
|
97
131
|
```typescript
|
|
98
|
-
import type { FormModel } from '@reformer/core';
|
|
132
|
+
import type { FormModel, FormSchemaNode } from '@reformer/core';
|
|
99
133
|
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
|
|
134
|
+
const itemRow = (item: FormModel<Item>): FormSchemaNode => ({
|
|
135
|
+
children: [
|
|
136
|
+
{ model: item.$.id, component: Input, componentProps: { label: 'ID' } },
|
|
137
|
+
{ model: item.$.name, component: Input, componentProps: { label: 'Name' } },
|
|
138
|
+
],
|
|
103
139
|
});
|
|
104
140
|
|
|
105
|
-
const schema = {
|
|
106
|
-
|
|
141
|
+
const schema: FormSchemaNode = {
|
|
142
|
+
children: [{ model: model.$.items, component: FieldArray, item: itemRow }],
|
|
107
143
|
};
|
|
108
144
|
```
|
|
109
145
|
|
|
146
|
+
Массив **без** `item` и с `component` — одно значение поля (мультивыбор, теги, список файлов):
|
|
147
|
+
`{ model: model.$.tags, component: SelectMulti }`.
|
|
148
|
+
|
|
110
149
|
### createForm API
|
|
111
150
|
|
|
112
151
|
```typescript
|
|
113
|
-
//
|
|
114
|
-
const
|
|
115
|
-
|
|
116
|
-
schema,
|
|
117
|
-
behavior: myBehavior,
|
|
152
|
+
// Сборка одним вызовом: модель, форма, уровень формы и дерево для рендера
|
|
153
|
+
const bundle = createForm<MyForm>({
|
|
154
|
+
initial, // либо готовая модель: model
|
|
155
|
+
schema: (model) => tree, // билдер дерева: узлы держат ручки модели
|
|
156
|
+
behavior: myBehavior, // опционально: defineFormBehavior(...) из @reformer/core/behaviors
|
|
157
|
+
validation: myRules, // опционально: схема либо { rules?, extras?, strategy? }
|
|
158
|
+
flow: { steps: [{ id: 'loan', rules: loanRules }] }, // опционально: шаги, id = selector шага
|
|
118
159
|
});
|
|
160
|
+
bundle.render.tree; // CompiledSchema — то же дерево после компиляции
|
|
161
|
+
|
|
162
|
+
// Низкоуровневая фабрика: готовые модель и дерево
|
|
163
|
+
const form = createFormFromModel<MyForm>({ model, schema, behavior: myBehavior });
|
|
119
164
|
|
|
120
|
-
// Доступ к нодам
|
|
165
|
+
// Доступ к нодам
|
|
121
166
|
form.name.setValue('John');
|
|
122
|
-
form.address.city.value.value;
|
|
123
|
-
model.items.push({ id: '1', name: 'Item' }); // операции над массивом — на модели
|
|
167
|
+
form.address.city.value.value; // текущее значение (через сигнал)
|
|
168
|
+
model.items.push({ id: '1', name: 'Item' }); // операции над массивом — на модели (или form.items.push)
|
|
124
169
|
```
|
|
125
170
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
171
|
+
Сборка компилирует дерево один раз (`compileSchema`): у каждого узла — вид (`field | array | part |
|
|
172
|
+
container | text`), идентификатор (`selector` либо позиционный путь `#/0/2`) и область (`#`,
|
|
173
|
+
`#/address`, `#/phones[<ключ>]`). Повтор `selector` в одной области (корень, строка массива,
|
|
174
|
+
подформа) — исключение с путями обоих узлов. В dev правило поведения на узел, которого нет в
|
|
175
|
+
дереве, и шаг `flow.steps`, для которого нет узла с таким `selector`, дают предупреждение в
|
|
176
|
+
консоли. Подробно — [37-compiled-schema.md](./37-compiled-schema.md).
|
|
130
177
|
|
|
131
|
-
###
|
|
178
|
+
### Ноды формы — типы и гарды
|
|
132
179
|
|
|
133
180
|
```typescript
|
|
134
181
|
const form = createFormFromModel<MyForm>({ model, schema });
|
|
135
182
|
|
|
136
|
-
form.email; //
|
|
137
|
-
form.address.city; //
|
|
138
|
-
form.items.at(0); //
|
|
183
|
+
form.email; // FormControl<string> — TypeScript знает тип
|
|
184
|
+
form.address.city; // FormControl<string> — вложенный доступ (form.address — FormGroup)
|
|
185
|
+
form.items.at(0); // FormGroup<ItemType> | undefined — форма строки массива
|
|
186
|
+
form.$.value; // поле с именем члена ноды (value, issues, reset, …) — через `$`
|
|
139
187
|
|
|
140
|
-
//
|
|
141
|
-
import {
|
|
142
|
-
if (
|
|
188
|
+
// FormControl / FormGroup / FormArray — интерфейсы, instanceof не работает. Вид ноды — гардами:
|
|
189
|
+
import { isFormControl, isFormGroup, isFormArray } from '@reformer/core';
|
|
190
|
+
if (isFormControl(node)) { /* ... */ }
|
|
143
191
|
```
|
package/docs/llms/10-arrays.md
CHANGED
|
@@ -2,80 +2,98 @@
|
|
|
2
2
|
|
|
3
3
|
Массивы объектов — **model-owned**: данные принадлежат модели (`model.arrayField` — это
|
|
4
4
|
`ModelArray<Item>` с реактивными `push`/`removeAt`/`length`). В схеме массив объявляется узлом
|
|
5
|
-
`{
|
|
6
|
-
|
|
5
|
+
`{ model: model.$.<path>, item: (itemModel) => узел }`, где `item` строит разметку одной строки
|
|
6
|
+
из её под-модели (`FormModel<Item>`).
|
|
7
7
|
|
|
8
8
|
```typescript
|
|
9
|
-
import {
|
|
10
|
-
|
|
9
|
+
import {
|
|
10
|
+
arrayOf,
|
|
11
|
+
createModel,
|
|
12
|
+
createFormFromModel,
|
|
13
|
+
type FormModel,
|
|
14
|
+
type FormSchemaNode,
|
|
15
|
+
} from '@reformer/core';
|
|
16
|
+
import { FieldArray, Input, InputNumber } from '@reformer/ui-kit';
|
|
11
17
|
|
|
12
18
|
type Item = { id: string; name: string; price: number };
|
|
13
19
|
type MyForm = { items: Item[] };
|
|
14
20
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
// arrayOf(blank) — пустой список и шаблон строки для кнопки «Добавить»
|
|
22
|
+
const blankItem = (): Item => ({ id: '', name: '', price: 0 });
|
|
23
|
+
const model = createModel<MyForm>({ items: arrayOf(blankItem) });
|
|
24
|
+
|
|
25
|
+
// разметка одной строки (item.$.field — ручка под-модели строки)
|
|
26
|
+
const itemRow = (item: FormModel<Item>): FormSchemaNode => ({
|
|
27
|
+
children: [
|
|
28
|
+
{ model: item.$.id, component: Input },
|
|
29
|
+
{ model: item.$.name, component: Input },
|
|
30
|
+
{ model: item.$.price, component: InputNumber },
|
|
31
|
+
],
|
|
22
32
|
});
|
|
23
33
|
|
|
24
|
-
const schema = {
|
|
25
|
-
|
|
34
|
+
const schema: FormSchemaNode = {
|
|
35
|
+
children: [{ model: model.$.items, component: FieldArray, item: itemRow }],
|
|
26
36
|
};
|
|
27
37
|
|
|
28
38
|
const form = createFormFromModel<MyForm>({ model, schema });
|
|
39
|
+
form.items; // FormArray<Item> — форма каждой строки: form.items.at(i)
|
|
29
40
|
```
|
|
30
41
|
|
|
31
|
-
>
|
|
32
|
-
>
|
|
33
|
-
> См. `30-type-safety-recipes.md`.
|
|
42
|
+
> Привязка массива — **ручка** `model.$.items`, как у поля и подформы. `item` на привязке, которая
|
|
43
|
+
> массивом не является (лист, группа), — ошибка компиляции.
|
|
34
44
|
|
|
35
45
|
### Массив как ОДНО значение поля
|
|
36
46
|
|
|
37
47
|
Массив бывает не набором под-форм, а одним значением: мультивыбор, теги, список файлов. Чем он
|
|
38
|
-
является, решает **схема**, а не данные: `{
|
|
39
|
-
`{
|
|
40
|
-
привязано, в форму не попадает.
|
|
48
|
+
является, решает **схема**, а не данные: `{ model, item }` — набор под-форм, а узел поля
|
|
49
|
+
`{ model: model.$.<путь>, component }` без `item` — одно значение. Массив, к которому в схеме
|
|
50
|
+
ничего не привязано, в форму не попадает.
|
|
41
51
|
|
|
42
52
|
```typescript
|
|
43
53
|
type MyForm = { tags: string[] };
|
|
44
54
|
|
|
45
55
|
const model = createModel<MyForm>({ tags: [] });
|
|
46
56
|
|
|
47
|
-
const schema = {
|
|
48
|
-
|
|
57
|
+
const schema: FormSchemaNode = {
|
|
58
|
+
children: [{ model: model.$.tags, component: SelectMulti }], // поле над массивом целиком
|
|
49
59
|
};
|
|
50
60
|
const form = createFormFromModel<MyForm>({ model, schema });
|
|
51
61
|
|
|
52
|
-
form.tags.setValue(['a', 'b']); //
|
|
62
|
+
form.tags.setValue(['a', 'b']); // FormControl<string[]>
|
|
53
63
|
model.$.tags.value = ['c']; // ручка значения: заменяет массив целиком
|
|
54
64
|
validate(model.$.tags, [required(), maxLength(3)]); // правило получает массив
|
|
55
65
|
```
|
|
56
66
|
|
|
57
|
-
- `model.$.<массив>` — записываемая ручка значения (`PathAwareSignal`): подходит для `
|
|
67
|
+
- `model.$.<массив>` — записываемая ручка значения (`PathAwareSignal`): подходит для `model:` в
|
|
58
68
|
схеме, `validate`/`cross`, `enableWhen`/`copyFrom` и для `model.signalAt(path)`.
|
|
59
69
|
- Узел-массив хранит только массив: запись `null`/`undefined` даёт `[]`. Нужно отличать «не
|
|
60
70
|
выбирали» от «выбрали ничего» — объявляй поле `T[] | null` с начальным `null`: в рантайме это
|
|
61
71
|
лист, и привязывается он так же.
|
|
72
|
+
- **Контейнер с `null` в типе — значение как есть.** `model.tags` у поля `string[] | null` — это
|
|
73
|
+
`string[] | null`, а не фасад `ModelArray`; `model.$.tags` — лист `PathAwareSignal` без `length`
|
|
74
|
+
и индексов; группа `Address | null` — `Address | null` без под-модели. Такое поле начинают с
|
|
75
|
+
`null`: контейнер, созданный из `[]` или `{}`, в рантайме стал бы фасадом, а тип его не видит.
|
|
62
76
|
- Запись в узел-ГРУППУ (`model.$.<группа>.value = …`) — ошибка: группа пишется по полям или через
|
|
63
77
|
`model.patch(...)`.
|
|
64
78
|
|
|
65
79
|
### Массив в группе и в строке другого массива
|
|
66
80
|
|
|
67
|
-
Узел `{
|
|
68
|
-
массив в строке — `form.<массив>.at(i).<массив>`.
|
|
81
|
+
Узел `{ model, item }` стоит на любой глубине: массив в группе получает ноду `form.<группа>.<массив>`,
|
|
82
|
+
массив в строке — `form.<массив>.at(i).<массив>`. Разметка строки объявляет свои массивы так же.
|
|
69
83
|
|
|
70
84
|
```typescript
|
|
71
|
-
const
|
|
72
|
-
|
|
73
|
-
|
|
85
|
+
const contactRow = (contact: FormModel<Contact>): FormSchemaNode => ({
|
|
86
|
+
children: [
|
|
87
|
+
{ model: contact.$.name, component: Input },
|
|
88
|
+
{ model: contact.$.phones, item: phoneRow }, // массив в строке массива
|
|
89
|
+
],
|
|
74
90
|
});
|
|
75
91
|
|
|
76
|
-
const schema = {
|
|
77
|
-
|
|
78
|
-
|
|
92
|
+
const schema: FormSchemaNode = {
|
|
93
|
+
children: [
|
|
94
|
+
{ model: model.$.details.hotlines, item: phoneRow }, // массив в группе
|
|
95
|
+
{ model: model.$.contacts, item: contactRow },
|
|
96
|
+
],
|
|
79
97
|
};
|
|
80
98
|
```
|
|
81
99
|
|
|
@@ -86,40 +104,41 @@ const schema = {
|
|
|
86
104
|
Одна и та же коллекция описывается **тремя разными формами** — по одной на движок. Их легко
|
|
87
105
|
перепутать, но каждая корректна только в своём контексте:
|
|
88
106
|
|
|
89
|
-
1.
|
|
90
|
-
|
|
91
|
-
**value-proxy** `model.properties` (он несёт `__path`), а **не** через сигнальный
|
|
92
|
-
`model.$.properties`.
|
|
107
|
+
1. **Схема формы** — узел `{ model: model.$.<path>, item: (itemModel) => узел }` среди `children`
|
|
108
|
+
дерева:
|
|
93
109
|
|
|
94
110
|
```typescript
|
|
95
|
-
// узел схемы для
|
|
96
|
-
|
|
111
|
+
// узел схемы для createForm / createFormFromModel
|
|
112
|
+
{ model: model.$.properties, component: FieldArray, item: propertyRow },
|
|
97
113
|
```
|
|
98
114
|
|
|
99
|
-
2.
|
|
100
|
-
|
|
101
|
-
|
|
115
|
+
2. **Схема валидации (`@reformer/core/validation`)** — правила строки объявляются отдельной схемой
|
|
116
|
+
над типом строки и подключаются оператором `applyEach(model.$.<массив>, схема)`. У схемы строки
|
|
117
|
+
своя область: её `cross` получает снимок строки. Запуск — `validateModel(model, schema)`.
|
|
102
118
|
|
|
103
119
|
```typescript
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
validate(
|
|
107
|
-
validate(im.$.estimatedValue, [required(), min(1)]);
|
|
120
|
+
const propertyRules = defineValidation<Property>(({ model }) => {
|
|
121
|
+
validate(model.$.description, [required()]);
|
|
122
|
+
validate(model.$.estimatedValue, [required(), min(1)]);
|
|
108
123
|
});
|
|
124
|
+
|
|
125
|
+
// внутри defineValidation<MyForm>(({ model }) => { ... })
|
|
126
|
+
applyEach(model.$.properties, propertyRules);
|
|
109
127
|
```
|
|
110
128
|
|
|
111
|
-
3. **CDK / render** — работают с уже **материализованной** нодой `form.<array>` (`
|
|
112
|
-
а не со схемой: `<
|
|
129
|
+
3. **CDK / render** — работают с уже **материализованной** нодой `form.<array>` (`FormArray`),
|
|
130
|
+
а не со схемой: `<FieldArray.Root control={form.properties}>` (CDK) или `FieldArraySection` из
|
|
113
131
|
`@reformer/ui-kit` (`control={form.properties}`, `itemComponent`).
|
|
114
132
|
|
|
115
|
-
> **Не путай
|
|
116
|
-
>
|
|
117
|
-
>
|
|
118
|
-
>
|
|
133
|
+
> **Не путай запись по движку.** Схема формы — узел `{ model, item }`; правила строк —
|
|
134
|
+
> `applyEach(model.$.<массив>, схема)` в схеме валидации; `FieldArray.Root control={form.x}` (или
|
|
135
|
+
> `FieldArraySection`) — рендер. `applyEach` в схеме формы не подхватится, а узел `{ model, item }`
|
|
136
|
+
> схема валидации не обходит.
|
|
119
137
|
|
|
120
|
-
### Array operations — на модели
|
|
138
|
+
### Array operations — на модели или на ноде
|
|
121
139
|
|
|
122
|
-
Мутации массива делаются через `ModelArray` (`model.items`)
|
|
140
|
+
Мутации массива делаются через `ModelArray` (`model.items`) либо через ноду формы `FormArray`
|
|
141
|
+
(`form.items`) — нода данными не владеет и передаёт мутацию в тот же массив модели:
|
|
123
142
|
|
|
124
143
|
```typescript
|
|
125
144
|
model.items.push({ id: '1', name: '', price: 0 }); // добавить в конец (плоские значения!)
|
|
@@ -131,8 +150,18 @@ model.items.clear();
|
|
|
131
150
|
model.items.length; // реактивная длина
|
|
132
151
|
model.items.at(0); // под-модель элемента (FormModel<Item>)
|
|
133
152
|
model.items.map((item, i) => item.name); // item — FormModel<Item>
|
|
153
|
+
|
|
154
|
+
// та же мутация через ноду формы (у ноды вставка — insert, у модели — insertAt)
|
|
155
|
+
form.items.push(); // строка по шаблону arrayOf(blank)
|
|
156
|
+
form.items.insert(0, { id: '3', name: '', price: 0 });
|
|
157
|
+
form.items.removeAt(index);
|
|
158
|
+
form.items.length; // число строк (число, не сигнал)
|
|
159
|
+
form.items.keyAt(index); // стабильный ключ строки
|
|
134
160
|
```
|
|
135
161
|
|
|
162
|
+
Формы строк держатся за под-модели элементов и при `move` / `swap` не пересоздаются; ключ строки
|
|
163
|
+
(`keyAt`) не меняется при перестановке — его и берут для React `key`.
|
|
164
|
+
|
|
136
165
|
> **Плоские значения при push.** В `push`/`insertAt` передавай payload из **плоских значений**
|
|
137
166
|
> (`{ id, name, price }`), а НЕ FieldConfig-шаблон (`{ value, component }`). Component/componentProps
|
|
138
167
|
> берутся из `item`-фабрики схемы автоматически.
|
|
@@ -149,27 +178,27 @@ model.items.map((item, i) => item.name); // item — FormModel<Item>
|
|
|
149
178
|
|
|
150
179
|
### Rendering Arrays
|
|
151
180
|
|
|
152
|
-
Каждый элемент массива — под-форма (`
|
|
181
|
+
Каждый элемент массива — под-форма (`FormGroup<Item>`). Итерируй через `form.items.map`:
|
|
153
182
|
|
|
154
183
|
```tsx
|
|
155
|
-
import { useArrayLength } from '@reformer/core';
|
|
184
|
+
import { useArrayLength } from '@reformer/core/react';
|
|
156
185
|
|
|
157
|
-
function ItemsList({ form }: { form:
|
|
186
|
+
function ItemsList({ form }: { form: FormGroup<MyForm> }) {
|
|
158
187
|
const length = useArrayLength(form.items);
|
|
159
188
|
|
|
160
189
|
return (
|
|
161
190
|
<div>
|
|
162
191
|
{form.items.map((item, index) => (
|
|
163
|
-
<div key={index}>
|
|
192
|
+
<div key={form.items.keyAt(index)}>
|
|
164
193
|
<FormField control={item.name} />
|
|
165
194
|
<FormField control={item.price} />
|
|
166
|
-
<button onClick={() =>
|
|
195
|
+
<button onClick={() => form.items.removeAt(index)}>Remove</button>
|
|
167
196
|
</div>
|
|
168
197
|
))}
|
|
169
198
|
|
|
170
199
|
{length === 0 && <p>No items yet</p>}
|
|
171
200
|
|
|
172
|
-
<button onClick={() =>
|
|
201
|
+
<button onClick={() => form.items.push({ id: crypto.randomUUID(), name: '', price: 0 })}>
|
|
173
202
|
Add Item
|
|
174
203
|
</button>
|
|
175
204
|
</div>
|
|
@@ -177,34 +206,36 @@ function ItemsList({ form }: { form: FormProxy<MyForm> }) {
|
|
|
177
206
|
}
|
|
178
207
|
```
|
|
179
208
|
|
|
180
|
-
> В монорепо для массивов используется готовый `
|
|
181
|
-
> (`control={form.items}`, `itemComponent`,
|
|
182
|
-
>
|
|
209
|
+
> В монорепо для массивов используется готовый `FieldArraySection` из `@reformer/ui-kit`
|
|
210
|
+
> (`control={form.items}`, `itemComponent`, add/remove/reorder из коробки; шаблон новой строки —
|
|
211
|
+
> `arrayOf(blank)` в модели, проп `initialValue` — запасной путь). В схеме массив под-форм рисует
|
|
212
|
+
> компонент `FieldArray` узла `{ model, component: FieldArray, item }`.
|
|
213
|
+
> См. `find_recipe(topic="field-array")`.
|
|
183
214
|
|
|
184
215
|
### Array Cross-Validation
|
|
185
216
|
|
|
186
|
-
|
|
187
|
-
(плоские значения), ошибка вешается на
|
|
188
|
-
|
|
217
|
+
Правило над всем массивом пишется оператором `cross` из аргумента схемы: `check` получает снимок
|
|
218
|
+
модели области (`model.get()`, плоские значения), ошибка вешается на поле-носитель. Тип снимка
|
|
219
|
+
выведен из схемы. Правила строк — `applyEach` (см. выше).
|
|
189
220
|
|
|
190
221
|
Носитель — любое **скалярное** поле формы (флаг `hasItems`, итоговая сумма и т.п.), у которого
|
|
191
|
-
есть
|
|
222
|
+
есть ручка `model.$.<field>` и нода в форме:
|
|
192
223
|
|
|
193
224
|
```typescript
|
|
194
|
-
import { cross } from '@reformer/core/validation';
|
|
195
|
-
|
|
196
225
|
type MyForm = { hasItems: boolean; items: Item[] };
|
|
197
226
|
|
|
198
|
-
|
|
199
|
-
cross(model.$.hasItems, (
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
227
|
+
defineValidation<MyForm>(({ model, cross }) => {
|
|
228
|
+
cross(model.$.hasItems, (form) => {
|
|
229
|
+
const names = form.items.map((item) => item.name);
|
|
230
|
+
return names.length !== new Set(names).size
|
|
231
|
+
? { code: 'items.duplicate' }
|
|
232
|
+
: null;
|
|
233
|
+
});
|
|
204
234
|
});
|
|
205
235
|
```
|
|
206
236
|
|
|
207
237
|
## See also
|
|
208
238
|
|
|
209
|
-
- [03-api-signatures.md](./03-api-signatures.md) — сигнатуры нод `form.<array>` / `ModelArray`,
|
|
210
|
-
-
|
|
239
|
+
- [03-api-signatures.md](./03-api-signatures.md) — сигнатуры нод `form.<array>` / `ModelArray`, правила строк `applyEach`
|
|
240
|
+
- [37-compiled-schema.md](./37-compiled-schema.md) — область строки `#/items[<ключ>]` и `keyAt`
|
|
241
|
+
- CDK / ui-kit field-array (`FieldArray.Root`, `FieldArraySection`) — `find_recipe(topic="field-array")`
|