display async messages coming from backend system

[niklasgrewe]

A often use case is to register/login users. Sometimes we need to display error messages like "Invalid Password" or something else, coming from a backend system. It would be nice, if i can use svelte-use-form to display these errors too, maybe like this:

function submit() {
   login(email, password)
      .then(() => { // do something with the response })
      .catch(e => {
         if (e.message.includes("Invalid Password")) {
            form.email.errorMap = "Wrong Password, please try again"
         }
      })
}

I don't know to what extent it is possible to store error messages in the ErrorMap that are not assigned to a validator. However, this error could then be displayed via this code dynamic:

Object.values($form.email.errors)[0]

I know the goal of this repo is to be easy to use. Nevertheless I would be happy if we could find a way to cover this use case.

[noahsalvi]

You're right, having svelte-use-form also cover those async cases would be nice but keeping it simple is the problem. Also when setting an error manually like in your example, when should it be removed, on input change?

What about an api like this?

function submit() {
   login(email, password)
      .then(() => { // do something with the response })
      .catch(e => {
         if (e.message.includes("Invalid Password")) {
           $form.email.error('Wrong Password, please try again")
         }
      })
}

[niklasgrewe]

when should it be removed, on input change?

yeah that's a good idea, because this means that the user has already noticed the error and now wants to correct it.

yes I like your API idea, very clean and simple. Could this error then also be displayed dynamically via this code?

Object.values($form.email.errors)[0]

Here's how I think of it: Since the form has already been submitted, there can be no more errors from the validators. That means the error I get via Object.values($form.email.errors)[0] is the error from the backend. As soon as the user changes the input again, the backend error removed and the errors from the validators are displayed again, so it's the same as before.

[noahsalvi]

In the example above, Object.values($form.email.errors)[0] wouldn't work...

But It would work if the error function takes in an error object instead of just the string, that would even make more sense than what I proposed.

This means:

function submit() {
   login(email, password)
      .then(() => { // do something with the response })
      .catch(e => {
         if (e.message.includes("Invalid Password")) {
           $form.email.error({ loginFail: "Wrong Password, please try again"});
         }
      })
}

That way the error can be added internally to the errors object of the formControl, like the other errors added by the validators at runtime.

This comes with the advantage, that you can also access it via the errors object $form.email.errors.loginFail, which the Hint components require to work.

The "manual error" could be set at the start of the errors object, that way we can use Object.values($form.email.errors)[0] and after changing the content of the field it will automatically empty the errors object and revalidate the field (current behaviour).

[niklasgrewe]

that sounds very good. could you implement it like that? I can't wait to use it in my project 😄

[noahsalvi]

This is now supported in 2.3.0

$form.controlName.error({ errorName: "Some text" });

[noahsalvi]

Btw on what project are you working right now? It seems like you need lots of forms for it 😂

[niklasgrewe]

thank you that you have implemented so quickly, i doesn't see that every day 👍

Btw on what project are you working right now? It seems like you need lots of forms for it

simply said I am building something like Notion but even better and easier to use. I'm thinking quite a bit about how we use information, how we deal with it, and how to put everything in context even better and more clearly, whether it's a document, a video, an image, or something like that. The app will later be available for web, desktop and mobile. Let's see if I can find someone else to help me with the mobile development. Currently I still have quite a lot of web development to do 😄

[noahsalvi]

ah that sounds cool!

I'm looking forward to its release 😁

[niklasgrewe]

thanks glad to hear it. I'll let you know when I'm in beta status 👍 I have seen that you are familiar with Flutter. You don't have time and desire to support me with this project, do you?

[noahsalvi]

Haha yes I've worked with flutter but at the moment I'm kind of busy with work and soon I'll also be starting my studies 😬 If anything changes I'll get in touch