useCwaFormInput

useCwaFormInput binds a single field inside a Form component to a reactive value and handles per-field validation, error display, and value synchronisation with the shared form store.

const { value, vars, errors, valid, validating, displayErrors, onBlur, validate, onInput } = useCwaFormInput(iri, fullName)

Signature

useCwaFormInput(
  iri: Ref<string | undefined>,
  fullName: string,
  opts?: { blurTrigger?: Ref<boolean> }
)

Parameters

Return Values

displayErrors

Errors should be displayed when any of the following is true:

• The user has blurred the field (onBlur was called)
• The field was previously valid and has since become invalid (regression)
• The form has been submitted and failed (isSubmitAttempted is true for this IRI)

With a blurTrigger, the first two rules are replaced: errors wait for the trigger to become true, or for a failed submit.

Errors are always hidden while validating is true, so a stale message doesn't flash during revalidation.

Bind it to a conditional wrapper around your error list so errors only surface at the right moment.

validate()

Sends the form's current values to its {iri}/submit endpoint via PATCH so the API can validate them and return per-field errors. The body holds every field registered for the form, not only this one, so the API validates the whole form and every field's errors update from the one response. The store is updated automatically, and errors / valid react accordingly.

This happens for every form — the form's own method only controls the final submit(). The API treats a PATCH to /submit as a partial submit, so no data is persisted and no success event fires.

Field full_name

Symfony serialises form fields using their full_name, which follows the pattern form_name[field_name] (or form_name[child][field_name] for nested fields). The value comes from vars.full_name in the form resource response.

Value Lifecycle

• Initialised from vars.value (the API's current value for this field)
• Resets to the API value when iri changes (e.g. navigating between resources)
• Synced into the form store ($cwa.forms.setFieldValue()) so useCwaForm.submit() can read all fields at once via $cwa.forms.getFieldValues()
• Cleared from the store on component unmount

Example

<script setup lang="ts">
const props = defineProps<{ iri: string; fullName: string }>()
const iriRef = toRef(props, 'iri')

const { value, vars, errors, displayErrors, onBlur, onInput } = useCwaFormInput(iriRef, props.fullName)
</script>

<template>
  <div>
    <label :for="props.fullName">{{ vars?.label }}</label>

    <input
      :id="props.fullName"
      v-model="value"
      v-bind="vars?.attr"
      @blur="onBlur"
      @input="onInput"
    />

    <ul v-if="displayErrors && errors.length">
      <li v-for="error in errors" :key="error" class="text-red-500">
        {{ error }}
      </li>
    </ul>
  </div>
</template>

Notes

• Each field component should call useCwaFormInput with its own fullName — the composable registers itself in the shared store and cleans up on unmount
• onInput is a 300 ms debounce so rapid typing doesn't flood the API with validation requests; call validate() directly if you need immediate validation
• Extra data can be passed to validate(extraData) — it is merged into the PATCH body, useful when validation of one field depends on another's current value