ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ содСрТимому

πŸ“– Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ API ​

createForm(initialValues, rulesBuilder, options?) ​

Π‘ΠΎΠ·Π΄Π°Π΅Ρ‚ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ с Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠ΅ΠΉ.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:

  • initialValues - ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ значСния Ρ„ΠΎΡ€ΠΌΡ‹ (ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π²Ρ‹Π²ΠΎΠ΄ Ρ‚ΠΈΠΏΠΎΠ²)
  • rulesBuilder - Ѐункция-ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒ ΠΏΡ€Π°Π²ΠΈΠ» (r, define) => define({...}) ΠΈΠ»ΠΈ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ computed computed(() => { const r = createRules(); return {...} }) для i18n
  • options - Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ настройки

Настройки:

  • onSubmit? - ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹
  • onClear? - ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ очистки Ρ„ΠΎΡ€ΠΌΡ‹

Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚: ЭкзСмпляр Ρ„ΠΎΡ€ΠΌΡ‹ с Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ свойствами ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ возмоТности:

  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΡ‚Π΅ΠΉ Ρ‚ΠΈΠΏΠ° 'contacts.0.email'
  • ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ arrayPath() ΠΈ objectPath() для типобСзопасного построСния ΠΏΡƒΡ‚Π΅ΠΉ
  • Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ массивами: addArrayItem(), removeArrayItem(), toggleArrayItem()
  • АвтоматичСская оптимизация Π² зависимости ΠΎΡ‚ структуры Π΄Π°Π½Π½Ρ‹Ρ…

Бвойства ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ Ρ„ΠΎΡ€ΠΌΡ‹ ​

Π Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ состояниС ​

Π‘Π²ΠΎΠΉΡΡ‚Π²ΠΎΠ’ΠΈΠΏΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
valuesRef<T>Π’Π΅ΠΊΡƒΡ‰ΠΈΠ΅ значСния Ρ„ΠΎΡ€ΠΌΡ‹ (Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ref)
valTΠ“Π΅Ρ‚Ρ‚Π΅Ρ€ для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ доступа ΠΊ значСниям (Π² script)
errorsRef<Record<string, string[]>>Ошибки Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ полям
touchedRef<Record<string, boolean>>БостояниС "тронутости" ΠΏΠΎΠ»Π΅ΠΉ
dirtyRef<Record<string, boolean>>Π˜Π·ΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ поля
isValidatingRef<Record<string, boolean>>Поля Π² процСссС Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠΈ
isSubmittingRef<boolean>Бтатус ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹
isValidComputedRef<boolean>Π’Π°Π»ΠΈΠ΄Π½ΠΎΡΡ‚ΡŒ всСй Ρ„ΠΎΡ€ΠΌΡ‹
isDirtyComputedRef<boolean>НаличиС нСсохранСнных ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ
hasAnyErrorsComputedRef<boolean>НаличиС ошибок Π² Ρ„ΠΎΡ€ΠΌΠ΅
touchedFieldsComputedRef<string[]>Бписок "Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹Ρ…" ΠΏΠΎΠ»Π΅ΠΉ
dirtyFieldsComputedRef<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Полная информация ΠΎ состоянии поля

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования:

typescript
// ΠžΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ поля
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}.filesComputedRef<File[]> - Бписок Ρ„Π°ΠΉΠ»ΠΎΠ²
file.{fieldName}.fileInfoComputedRef<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)

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ ΠΏΠΎΠ΄ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ MIT.