Form error message in UI Kit 2

I am using <Form> from UI kit 2.

I am looking for the right way to render error message from onSubmit in the form e.g. below the respective input field or a general error message for the form. See screenshot how it is rendered in Releases tab in standard Jira. Using <Text> does not allow me to define the font color.

How can I create such an error message using UI kit 2 for a form?

2 Likes

Hi @Holger,
You’re right, at the moment it’s not possible to render a custom error message like the one in the form above using UI Kit.
Have you considered displaying an error using a Section message?
Cheers!
Mel

When using <SectionMessage> the rendering is very huge and not according to Atlassian Design Guidelines.

Maybe from a layout perspective you could use <SectionMessage> for a general message at the beginning of a form, but not on individual form fields I would say.

More useful would be a UI 2 Kit component like <TextRed>. How can I raise feature requests for UI 2 kit? I have some more feedback for <Table> and <ModalDialog>.

It is strange and very optimistic to implement <Form> component without a concept for error messages I think. And afaik it is the same issue UI kit, so not only UI kit 2 preview.

1 Like

I understand. Thanks for the feedback Holger, I’ll pass it on to the UI Kit 2 team so they can track it as a feature request.
Cheers!
Melissa

1 Like

I created a suggestion here. Feel free to vote. https://ecosystem.atlassian.net/browse/FRGE-1347

2 Likes

Now UI Kit 2 is GA and ErrorMessage is available.

Can you help with how to set errors messages in the form in case of errors during submit?

<Form onSubmit={handleSubmit(submit)}>
...
   <Textfield {...register("name")} />
   {errors.name && (
       <ErrorMessage>{errors.name.message}</ErrorMessage>
   )}
...
</Form>
const submit = async (data) => {
   console.log("Form data", data);

   const requestBody = {
      projectId: projectId, 
      name: data.name
    };

   const response = await invoke("someJiraBackendCall", requestBody );

   console.log("Response data", response);

   if (response.errors) {
     //TODO How to create now the form errors?
     //TODO What to write here to populate ErrorMessage for the form field?
   }
}

Hi @Holger , we’re currently looking to expand on the useForm API to allow for custom error triggers such as on submit in the next iteration. For the time being, if you’re looking to render field errors from submission validations, you can add your own errors in react state instead. Here’s a small example:

import React, { useState } from "react";
import ForgeReconciler, {
  Button,
  Textfield,
  Form,
  useForm,
  Label,
  ErrorMessage,
} from "@forge/react";

export const App = () => {
  const { register, handleSubmit, formState } = useForm();

  const { errors } = formState;

  const [isNameSubmitError, setNameSubmitError] = useState(false);

  const submitData = (data) => {
    console.log(data);

    // if error
    setNameSubmitError(true);
  };

  return (
    <Form onSubmit={handleSubmit(submitData)}>
      <Label labelFor="name">Name</Label>
      <Textfield
        {...register("name", { required: true })}
        isInvalid={isNameSubmitError || !!errors.name}
      />
      {errors.name ? <ErrorMessage>This field is required</ErrorMessage> : null}
      {isNameSubmitError ? (
        <ErrorMessage>This name already exists</ErrorMessage>
      ) : null}
      <Button type="submit">submit</Button>
    </Form>
  );
};

ForgeReconciler.render(<App />);

1 Like

Thank you! Very helpful as a work around while waiting for enhancement of Forge useForm.

Is there an issue in ecosystem Jira for Forge where I can vote or follow for the progress on this enhancement?