Form

The form function is used to create a structured form with defined fields.

src/form.ts
import { form, fields } from '@codeleap/form'

const formExample = form('formId', {
  field1: fields.text({ label: 'Field 1' }),
  field2: fields.date({ label: 'Field 2' })
})

Parameters

id: Unique identifier for the form.
fields: Object defining the fields within the form.

API

all methods and properties that are available through a form

values: Accesses the current values of all form fields.

src/formApi.ts
import { formExample } from './form.ts'

function onSubmit() {
  console.log('Field1', formExample.values.field1)
  console.log('Field2', formExample.values.field2)
}

isValid: Accesses a boolean indicating whether the form is valid. It uses the validate() method to check the validity of all fields.

src/formApi.ts
import { formExample } from './form.ts'

function onSubmit() {
  console.log('isValid', formExample.isValid)
  
  if (!formExample.isValid) return
}

fields: Accesses the declared fields of the form.

src/formApi.ts
import { formExample } from './form.ts'

function onSubmit() {
  console.log('Field1 value', formExample.field1.value)
}

iterFields: Method allows you to iterate over all fields in the form and execute a callback for each field.

src/formApi.ts
import { formExample } from './form.ts'

function onInit() {
  formExample.iterFields(([name, field]) => {
    console.log(name, field.value)
  })
}

setValues: Method updates the values of multiple fields in the form.

src/formApi.ts
import { formExample } from './form.ts'

function onLoad(values) {
  formExample.setValues({
    field1: values.value1,
    field2: values.value2,
  })
}

resetValues: Method resets all field values to their default state.

src/formApi.ts
import { formExample } from './form.ts'

function onFinish() {
  formExample.resetValues()
}

firstInvalid: Method returns the first invalid field and its validation result.

src/formApi.ts
import { formExample } from './form.ts'

function onSubmit() {
  const { field, validation } = formExample.firstInvalid()
}

validate: Method validates the specified fields and returns the validation results. If no fields are specified, it validates all fields.

src/formApi.ts
import { formExample } from './form.ts'

function onSubmit() {
  const { field1 } = formExample.validate(['field1'])

  console.log(field1.isValid)
  console.log(field1.error)
}

register: Method registers a field with the form, returning the field's properties for integration with a UI.

src/formApi.tsx
import { formExample } from './form.ts'

function Component() {
  return <TextInput {...formExample.register('field1')} />
}

useSetValues: Hook is used to set form values reactively within a React component.

src/formApi.tsx
import { formExample } from './form.ts'

function Component() {
  formExample.useSetValues({ field1: 'new value' }, [])

  return null
}

use: Hook is used to select a specific slice of the form's state. It allows you to extract and reselect parts of the form's data based on a selector.

src/formApi.tsx
import { formExample } from './form.ts'

function Component() {
  const isValid = formExample.use(form => form.isValid)
  const values = formExample.use(form => form.values)

  return null
}

Parameters​

API​

Parameters

API