Form validation does not work properly on defaultvalues

Forge
1

when u initialize form using defaultValues, values can seen on screen but validations give errors, like it is empty. When the page load it seems ok but when u try to submit form u will see error. When you modify fields one by one, it submit form but you should do it for all form fields.

form-error

1 Like
2

Hey,

I can confirm this, I experienced the same behavior when using the useForm()-Hook with UI Kit 2.
I could not find a solution so far.

3

Hi @yavuzyasinCELIK , do you have a code snippet that can reproduce this issue?

I have a small example of it working as expected here - submit can be called successfully:

const FormValidationExample = () => {
  const { register, handleSubmit } = useForm({
    defaultValues: { test: "hello" },
  });

  return (
    <>
      <Form onSubmit={handleSubmit((data) => console.log(data))}>
        <Textfield {...register("test", { required: true })} />
        <Button type="submit">submit</Button>
      </Form>
    </>
  );
};
1 Like
4

that is the code I had issue

import React, { useEffect, useState, Fragment } from 'react';
import { useForm, Form, FormHeader, FormSection, FormFooter, Label, HelperMessage, RequiredAsterisk, Textfield, TextArea, Select, Button, Spinner 
} from "@forge/react";
import ForgeReconciler, { Text } from '@forge/react';

const Configurations = (props) => {
  const { trigger, handleSubmit, register, getFieldId } = useForm(props.defaultValues);

  const setDataFromStorage = (data) => {
    console.log("set data...");
  };

  useEffect(async () => {
    console.log("load data...");
  }, []);

  return (
    <Fragment>
      <Form onSubmit={handleSubmit(setDataFromStorage)}>
        <FormHeader title="Configuraiton For OpenApi">
          Required fields are marked with an asterisk <RequiredAsterisk />
        </FormHeader>
        <FormSection>
          <Label labelFor={getFieldId("apikey")}>
            Api Key
            <RequiredAsterisk />
          </Label>
          <Textfield type='password' {...register("apikey", { required: true })} />

          <Label labelFor={getFieldId("assistant")}>
            Assitant Name
            <RequiredAsterisk />
          </Label>
          <Textfield {...register("assistant", { required: true })} />

          <Label labelFor={getFieldId("instruction")}>
            Instructions
            <RequiredAsterisk />
          </Label>
          <TextArea {...register("instruction", { required: true })} />

          <Label labelFor={getFieldId("model")}>
            Model
            <RequiredAsterisk />
          </Label>
          <Select
            options={[
              { label: 'gpt-3.5-turbo', value: 'gpt-3.5-turbo' },
              { label: 'gpt-4-turbo-preview', value: 'gpt-4-turbo-preview' },
            ]}
            {...register("model", { required: true })}
          />
        </FormSection>
        <FormFooter>
          <Button appearance="primary" type="submit">
            Submit
          </Button>
        </FormFooter>
      </Form>
    </Fragment>
  );
};

export default Configurations;
5

Hi @yavuzyasinCELIK is props.defaultValues there being passed through synchronously? If it’s initially undefined or is updated higher up in the tree, this could be the problem. One solution is to render Configurations only if defaultValues has returned a value.

1 Like
6

Yes I am doing as u told me. Only rendring if the value is not null but result is same.

return (
    <Fragment>
      {
        defaultValues !== null ? (
          <Configurations defaultValues={defaultValues}> </Configurations>
        ) : (
          <Spinner size="medium" />
        )
      }
    </Fragment>
  );