ember-headless-form
ember-headless-form copied to clipboard
Type error for `@validate` argument when using `validateYup`
When using this library in a Glint component, I am getting a type error trying to use validateYup
with @validate
:
import { validateYup } from 'ember-headless-form-yup';
...
export default class MyComponent {
...
<template>
<HeadlessForm
@validate={{validateYup this.args.schema}}
as |form|
>
...
</HeadlessForm>
</template>
}
The error I'm getting is:
Conversion of type 'FormValidateCallback<Partial<DATA>>' to type 'FormValidateCallback<DATA>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type 'Partial<DATA>' is not comparable to type 'DATA'.
'Partial<DATA>' is assignable to the constraint of type 'DATA', but 'DATA' could be instantiated with a different subtype of constraint 'object'.glint(2352)
The issue appears to be that validateYup
returns FormValidateCallback<Partial<DATA>>
while @validate
accepts only FormValidateCallback<DATA>
.
My current workaround is to move the code into a getter in the component and re-type it there:
get validate(): FormValidateCallback<DATA> | undefined {
return this.args.schema
? validateYup(this.args.schema) as unknown as FormValidateCallback<DATA>
: undefined;
}
It might be related to the fact that you are not passing @data
to the form, which is basically how the generic DATA
type is inferred. Even when you don't pre-populate the form with data, it makes sense to pass a value to infer the type, even if that value is just an empty object, but defined to have the type that your form expects. Like in this test for example?
@fastfedora could you please try that out?