Form with conditional fields based on type

[asaf]

Hey,

A common use case is to render different form controls based on some type,

Here's a starting point following #451 but I got into some issues with the paths.

https://stackblitz.com/edit/stackblitz-starters-mwyz3h?file=app%2Fexample%2Fform.tsx

• getFieldset() on type causes TS error.
• I was expecting the path to be smtp.config.host but it's actually type.smtp.config.host
• I guess since the path is wrong the initial value is not set correctly.

If there's any working example or some guidelines it'll be very helpful,

Related to:
#451
#144

Best,
Asaf.

[edmundhung]

Is this what you are looking for?

export function EmailForm() {
  const [lastResult, action] = useFormState(login, undefined);
  const [form, fields] = useForm({
    defaultValue: {
      type: 'smtp',
      config: {
        host: 'smtp.foo.com',
      },
    },
    // Sync the result of last submission
    lastResult,

    // Reuse the validation logic on the client
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: appEmailConfigSchema });
    },

    // Validate the form on blur event triggered
    shouldValidate: 'onBlur',
    shouldRevalidate: 'onInput',
  });

  // To access fields of the `config` object
  const configFieldset = fields.config.getFieldset();

  // You can now access the `host` field with `configFieldset`
  console.log('name', configFieldset.host.name);
  console.log('value', configFieldset.host.initialValue);

  return (
    <form id={form.id} onSubmit={form.onSubmit} action={action} noValidate>
      <div>
        <label>Email</label>
        <input
          type="email"
          key={configFieldset.host.key}
          name={configFieldset.host.name}
          defaultValue={configFieldset.host.initialValue}
        />
        <div>{configFieldset.host.errors}</div>
      </div>
      <button>Submit</button>
    </form>
  );
}

[asaf]

yea thanks, for anyone who's interested, following is a working example of a dynamic form based on type selection with validation and everything.

https://stackblitz.com/edit/stackblitz-starters-qcmaga?file=app%2Fpage.tsx

[asaf]

@edmundhung this discussion works up to version 1.1.3, upgrading to 1.1.5 breaks union,

Another thing with discriminatedUnion is that defaultValue is not inferred correctly (see https://stackblitz.com/edit/stackblitz-starters-qcmaga?file=app%2Fexample%2Fform.tsx)

fieldset in 1.1.3:

const configFieldset: Required<{
    token?: FieldMetadata<string | undefined, {
        type: "sendgrid";
        config: {
            token: string;
        };
    } | {
        type: "smtp";
        config: {
            host: string;
        };
    }, string[]> | undefined;
    host?: FieldMetadata<...> | undefined;
}>

fieldset in 1.1.5:

const fields: Required<{
    type: FieldMetadata<string, {
        type: string;
        config: {
            host: string;
        };
    }, string[]>;
    config: FieldMetadata<{
        host: string;
    }, {
        type: string;
        config: {
            host: string;
        };
    }, string[]>;
}>

[edmundhung]

I don't see anything suspicious on v1.1.4 or v1.1.5 that cause this issue unfortunately. Are you sure this happens only on v1.1.5?

The issue on your stackblitz looks like #478 and could be resolved by specifying the schema type as mentioned here.

[asaf]

@edmundhung any news about this? it started to break only on 1.1.5 which is just 2 minor versions up from a working version.

thanks!