How can I add custom error to specific field? - ember-headless-form + ember-headless-form-yup + yup

[olenderhub]

@simonihmig (@NullVoxPopuli recommend me to tag you there)

I am using ember-headless-form + ember-headless-form-yup + yup

I have

comonent hbs

<HeadlessForm
  @onSubmit={{this.onSubmit}}
  @onInvalid={{this.handleInvalidForm}}
  @validate={{validate-yup this.schema}}
  as |form|
>
  <form.Field @name='email' as |field|>
    <field.Label>Label</field.Label>
    <field.Input />
    <field.Errors />
  </form.Field>
</HeadlessForm>

component js
@action
async onSubmit(formObject) {
  // here I want to push on email field error by force (this is simple example to show what I want to achieve - in my case I need to push by force ValidationErrors from response from backend)
}

I know that probably I should use ValidationError from yup
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0afd3fb7191b9cb493bc102bdb204a2c49d4e3f0/types/yup/yup-tests.ts#LL86C1-L92C89

but not sure how to connect it with ember-headless-form from component js.

Can you help with this, please?

[NullVoxPopuli]

this is all {{validate-yup}} is doing: https://github.com/CrowdStrike/ember-headless-form/blob/main/packages/yup/src/helpers/validate-yup.ts#L39
so, to unblock / keep moving forward -- you could re-implement that one helper in your app to add the behavior you need.

Would be interesting to see if it could be extended to support errors from "elsewhere" tho

Discord convo: https://discord.com/channels/480462759797063690/483601670685720591/1110684877042487356
with potential extension option

[olenderhub]

Discord discussion about this:
https://discord.com/channels/480462759797063690/1111254468806316132

[simonihmig]

Sorry for the late feedback here!

If I understand you correctly, this is about rendering server-errors, right?

If so, there is indeed no real support for that (yet). The thing with the existing validation API as touched on above, is that its purpose is to specifically prevent submitting the form as long as (client-side!) validation does not pass! But for errors that can only be known server-side, this is not suitable. Here we must submit the form, and when receiving errors back, render them within the form in the same way as if they happened client-side, right?

As this addon is headless, nothing really is preventing you from doing the rendering of those errors where and how you need them. However I acknowledge this is not really convenient. Especially if you want to support the same a11y standards as what is already baked into the existing implementation, like applying aria-invalid="true" etc. for fields that server-errors can be associated to (e.g. "username is already taken").

So ideally you would be able to pass something like this, and all the error rendering happens as if it was a client-side validation error:

<HeadlessForm
  @onSubmit={{this.onSubmit}}
  @onInvalid={{this.handleInvalidForm}}
  @validate={{validate-yup this.schema}}
  @customErrors={{this.serversideErrorMap}} 
  as |form|
>

Again, there is no support for this yet. But we could do this eventually in the future, when we get to alignment here!

[ynotdraw]

It looks like all yup offers out of the box is https://github.com/jquense/yup#schematestname-string-message-string--function--any-test-function-schema, which isn't what is wanted in this case.

I'm mostly thinking out loud, but it feels like this problem is only with yup, no? When using ember-changesets, for example, one can add an error to a particular field via https://github.com/poteto/ember-changeset#adderror. Due to that, I'm wondering if a @customErrors on the Form API would be a bit confusing to use and even document.

If this case is unique to yup, could something be exposed via the helper provided by headless-form to allow folks to manually add errors since that is in our control?

[olenderhub]

@ynotdraw this is about state of invalid form. Yup enable to validate this "on-the-fly". I meant something like management of current state of raised errors.

Main question is how to update (or remove) errors that are stored in ember-headless-form that are there:

<field.Errors as |errors|>

I did workaround for this already in my project, but this doesn't look nice and I wish there will be management of adding or removing errors manually somehow for specific attribute in form :)