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?
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.
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
I created a suggestion here. Feel free to vote. https://ecosystem.atlassian.net/browse/FRGE-1347
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 />);
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?
Hello @QuocLieu , has there been work released for UI Kit enhancing useForm to allow custom error triggers as mentioned in your reply a while ago?
Hi @Holger , we spent some time investigating this, but unfortunately we couldn’t come out with a robust solution in time and the team has shifted to other priorities at this point in time. Our recommendation is to continue using React state or your own custom hooks to manipulate any state you require.