π Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ API β
createForm(initialValues, rulesBuilder, options?) β
Π‘ΠΎΠ·Π΄Π°Π΅Ρ ΡΠ΅Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠΎΡΠΌΡ Ρ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠ΅ΠΉ.
ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ:
initialValues- ΠΠ°ΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΡΠΌΡ (ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ²ΠΎΠ΄ ΡΠΈΠΏΠΎΠ²)rulesBuilder- Π€ΡΠ½ΠΊΡΠΈΡ-ΡΡΡΠΎΠΈΡΠ΅Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»(r, define) => define({...})ΠΈΠ»ΠΈ ΡΠ΅Π°ΠΊΡΠΈΠ²Π½ΡΠΉ computedcomputed(() => { const r = createRules(); return {...} })Π΄Π»Ρ i18noptions- ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ:
onSubmit?- ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡonClear?- ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΎΡΠΈΡΡΠΊΠΈ ΡΠΎΡΠΌΡ
ΠΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ: ΠΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΡΠΎΡΠΌΡ Ρ ΡΠ΅Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ:
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΠΏΡΡΠ΅ΠΉ ΡΠΈΠΏΠ°
'contacts.0.email' - ΠΠ΅ΡΠΎΠ΄Ρ
arrayPath()ΠΈobjectPath()Π΄Π»Ρ ΡΠΈΠΏΠΎΠ±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΏΡΡΠ΅ΠΉ - Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΠΈΠ²Π°ΠΌΠΈ:
addArrayItem(),removeArrayItem(),toggleArrayItem() - ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΊΡΡΡΡ Π΄Π°Π½Π½ΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΎΡΠΌΡ β
Π Π΅Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ β
| Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ | Π’ΠΈΠΏ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|---|
values | Ref<T> | Π’Π΅ΠΊΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΡΠΌΡ (ΡΠ΅Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ref) |
val | T | ΠΠ΅ΡΡΠ΅Ρ Π΄Π»Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ (Π² script) |
errors | Ref<Record<string, string[]>> | ΠΡΠΈΠ±ΠΊΠΈ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ ΠΏΠΎ ΠΏΠΎΠ»ΡΠΌ |
touched | Ref<Record<string, boolean>> | Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ "ΡΡΠΎΠ½ΡΡΠΎΡΡΠΈ" ΠΏΠΎΠ»Π΅ΠΉ |
dirty | Ref<Record<string, boolean>> | ΠΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»Ρ |
isValidating | Ref<Record<string, boolean>> | ΠΠΎΠ»Ρ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ |
isSubmitting | Ref<boolean> | Π‘ΡΠ°ΡΡΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ |
isValid | ComputedRef<boolean> | ΠΠ°Π»ΠΈΠ΄Π½ΠΎΡΡΡ Π²ΡΠ΅ΠΉ ΡΠΎΡΠΌΡ |
isDirty | ComputedRef<boolean> | ΠΠ°Π»ΠΈΡΠΈΠ΅ Π½Π΅ΡΠΎΡ ΡΠ°Π½Π΅Π½Π½ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ |
hasAnyErrors | ComputedRef<boolean> | ΠΠ°Π»ΠΈΡΠΈΠ΅ ΠΎΡΠΈΠ±ΠΎΠΊ Π² ΡΠΎΡΠΌΠ΅ |
touchedFields | ComputedRef<string[]> | Π‘ΠΏΠΈΡΠΎΠΊ "ΡΡΠΎΠ½ΡΡΡΡ " ΠΏΠΎΠ»Π΅ΠΉ |
dirtyFields | ComputedRef<string[]> | Π‘ΠΏΠΈΡΠΎΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΡ ΠΏΠΎΠ»Π΅ΠΉ |
ΠΠ΅ΡΠΎΠ΄Ρ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ β
| ΠΠ΅ΡΠΎΠ΄ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|
setRules(rules) | Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ |
validateField(name) | ΠΠ°Π»ΠΈΠ΄ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Π΅ (ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅) |
validateForm() | ΠΠ°Π»ΠΈΠ΄ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΡ ΡΠΎΡΠΌΡ |
submit() | ΠΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠΎΡΠΌΡ ΠΏΠΎΡΠ»Π΅ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ |
touch(field) | ΠΡΠΌΠ΅ΡΠΈΡΡ ΠΏΠΎΠ»Π΅ ΠΊΠ°ΠΊ "ΡΡΠΎΠ½ΡΡΠΎΠ΅" (ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅) |
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ β
| ΠΠ΅ΡΠΎΠ΄ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|
setValues(values) | ΠΠ±Π½ΠΎΠ²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Π΅ΠΉ |
getValues() | ΠΠΎΠ»ΡΡΠΈΡΡ ΠΊΠΎΠΏΠΈΡ ΡΠ΅ΠΊΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ |
clear(useInitial?) | ΠΡΠΈΡΡΠΈΡΡ ΡΠΎΡΠΌΡ |
reset(newValues?) | Π‘Π±ΡΠΎΡΠΈΡΡ ΡΠΎΡΠΌΡ ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ |
resetState() | Π‘Π±ΡΠΎΡΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ |
setErrors(errors) | Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΡΠΈΠ±ΠΊΠΈ Π΄Π»Ρ ΠΏΠΎΠ»Π΅ΠΉ |
resetErrors() | ΠΡΠΈΡΡΠΈΡΡ Π²ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ |
ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎΠ»Π΅ΠΉ β
Π£Π½ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ (ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌΠΈ ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ):
| ΠΠ΅ΡΠΎΠ΄ | ΠΠΎΠ·Π²ΡΠ°Ρ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|---|
hasError(field) | boolean | ΠΡΡΡ Π»ΠΈ ΠΎΡΠΈΠ±ΠΊΠΈ Π² ΠΏΠΎΠ»Π΅ |
error(field) | string | null | ΠΠ΅ΡΠ²Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ° ΠΏΠΎΠ»Ρ |
allErrors(field) | string[] | ΠΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΏΠΎΠ»Ρ |
isTouched(field) | boolean | ΠΡΠ»ΠΎ Π»ΠΈ ΠΏΠΎΠ»Π΅ "ΡΡΠΎΠ½ΡΡΠΎ" |
validating(field) | boolean | ΠΠ°Π»ΠΈΠ΄ΠΈΡΡΠ΅ΡΡΡ Π»ΠΈ ΠΏΠΎΠ»Π΅ |
isFieldDirty(field) | boolean | ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ Π»ΠΈ ΠΏΠΎΠ»Π΅ |
getFieldStatus(field) | FieldStatus | ΠΠΎΠ»Π½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΏΠΎΠ»Ρ |
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ:
// ΠΠ±ΡΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ
form.hasError('email')
form.error('name')
// ΠΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΏΡΡΠΈ
form.hasError('contacts.0.email')
form.error('address.street')
// Π‘ Π°Π²ΡΠΎΠ΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΡΠ΅Π· helper'Ρ
form.hasError(form.arrayPath('contacts', 0, 'email'))
form.error(form.objectPath('address', 'street'))Π Π°Π±ΠΎΡΠ° Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ ΡΡΡΡΠΊΡΡΡΠ°ΠΌΠΈ β
| ΠΠ΅ΡΠΎΠ΄ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|
addArrayItem(arrayPath, item) | ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΌΠ°ΡΡΠΈΠ² |
removeArrayItem(arrayPath, index) | Π£Π΄Π°Π»ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΌΠ°ΡΡΠΈΠ²Π° |
toggleArrayItem(arrayPath, item) | ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ (Π΄ΠΎΠ±Π°Π²ΠΈΡΡ/ΡΠ΄Π°Π»ΠΈΡΡ) |
arrayIncludes(arrayPath, item) | ΠΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ |
arrayPath(arrayField, index, property) | ΠΠΎΡΡΡΠΎΠΈΡΡ ΡΠΈΠΏΠΎΠ±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΉ ΠΏΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ°ΡΡΠΈΠ²Π° |
objectPath(objectField, property) | ΠΠΎΡΡΡΠΎΠΈΡΡ ΡΠΈΠΏΠΎΠ±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΉ ΠΏΡΡΡ ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ° |
Π€Π°ΠΉΠ»ΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ β
| Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|
file.{fieldName}.files | ComputedRef<File[]> - Π‘ΠΏΠΈΡΠΎΠΊ ΡΠ°ΠΉΠ»ΠΎΠ² |
file.{fieldName}.fileInfo | ComputedRef<FileInfo[]> - ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ°ΠΉΠ»Π°Ρ
|
file.{fieldName}.handler | (event: Event) => void - ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΡΠ±ΠΎΡΠ° ΡΠ°ΠΉΠ»ΠΎΠ² |
file.{fieldName}.clear | () => void - ΠΡΠΈΡΡΠΈΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΈ DOM input |
Note: Helpers ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π»Π΅Π½ΠΈΠ²ΠΎ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠΈ. ΠΠ»Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΠ±ΠΎΡΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ multiple Π½Π° <input type="file"> β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡ ΡΡΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΡΠΎΠ±ΡΡΠΈΡ Π²Π²ΠΎΠ΄Π°.
ΠΠ°ΠΆΠ½ΠΎ: ΠΠ΅ΡΠΎΠ΄ clear() ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΈΡΠ°Π΅Ρ ΡΠ°ΠΉΠ»ΠΎΠ²ΡΠ΅ ΠΏΠΎΠ»Ρ - ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΡΠΌΠ΅, ΡΠ°ΠΊ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² DOM input ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. ΠΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΡΠΈΡΡΠ°ΡΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ»Π΅ clear() ΡΠ°ΠΉΠ» ΠΈΡΡΠ΅Π·Π°Π΅Ρ ΠΈΠ· ΡΠΎΡΠΌΡ, Π½ΠΎ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² input.
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ β
| ΠΠ΅ΡΠΎΠ΄ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|
clearCache(field?) | ΠΡΠΈΡΡΠΈΡΡ ΠΊΡΡ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ (ΠΏΠΎΠ»Ρ ΠΈΠ»ΠΈ Π²Π΅ΡΡ ΠΊΡΡ) |
dispose() | ΠΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ watchers ΠΈ ΠΎΡΠΈΡΡΠΈΡΡ ΡΠ΅ΡΡΡΡΡ (Π°Π²ΡΠΎ ΠΏΡΠΈ unmount) |