test(Form): fix (#2153)

playground/app/components/FormElementsExample.vue

@@ -95,11 +95,11 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
     </UFormField>
 
     <div class="flex gap-2">
-      <UButton color="gray" type="submit" :disabled="form?.disabled">
+      <UButton color="gray" type="submit">
         Submit
       </UButton>
 
-      <UButton color="gray" variant="outline" :disabled="form?.disabled" @click="form?.clear()">
+      <UButton color="gray" variant="outline" @click="form?.clear()">
         Clear
       </UButton>
     </div>

src/runtime/components/Form.vue

@@ -46,7 +46,7 @@ const props = withDefaults(defineProps<FormProps<T>>(), {
 const emits = defineEmits<FormEmits<T>>()
 defineSlots<FormSlots>()
 
-const formId = props.id ?? useId()
+const formId = props.id ?? useId() as string
 
 const bus = useEventBus<FormEvent>(`form-${formId}`)
 const parentBus = inject(

src/runtime/components/FormField.vue

@@ -39,7 +39,7 @@ export interface FormFieldSlots {
 import { computed, ref, inject, provide, type Ref, useId } from 'vue'
 import { Label } from 'radix-vue'
 import { formFieldInjectionKey } from '../composables/useFormField'
-import type { FormError } from '../types/form'
+import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
 const props = defineProps<FormFieldProps>()
 const slots = defineSlots<FormFieldSlots>()
@@ -51,12 +51,7 @@ const ui = computed(() => formField({
 
 const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
-const error = computed(() => {
-  return (props.error && typeof props.error === 'string')
-    || typeof props.error === 'boolean'
-    ? props.error
-    : formErrors?.value?.find(error => error.name === props.name)?.message
-})
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name)?.message)
 
 const id = ref(useId())
 
@@ -67,7 +62,7 @@ provide(formFieldInjectionKey, computed(() => ({
   size: props.size,
   eagerValidation: props.eagerValidation,
   validateOnInputDelay: props.validateOnInputDelay
-})))
+}) as FormFieldInjectedOptions<FormFieldProps>))
 </script>
 
 <template>

src/runtime/types/form.ts

@@ -30,7 +30,7 @@ export interface FormError<P extends string = string> {
 }
 
 export interface FormErrorWithId extends FormError {
-  id: string
+  id?: string
 }
 
 export type FormSubmitEvent<T> = SubmitEvent & { data: T }