Dynamic forms with discriminatedUnion and React Hook Form

#javascript #react #typescript #frontend

Form validation is a crucial aspect of modern web applications. With libraries such as React Hook Form (RHF) and Zod, you can efficiently validate dynamic forms, including those with complex structures such as payment methods. This article explains how to use both Zod and RHF to validate forms dynamically using the powerful discriminatedUnion.

What is a discriminatedUnion?

A discriminatedUnion is an advanced typing technique used to model objects with different structures but sharing a common discriminating field. This discriminant field is used to identify which subtype is being used and to perform validation or manipulation accordingly.
For example, consider a payment form that may contain three types of payment method:

Credit card (requires a card number and CVV)
PayPal (requires an email address)
Bank transfer (requires an account number and bank code). Each of these types can be modelled using a discriminatedUnion Example of Data Modelling with Zod

import * as zod from "zod"

const IsNotEmptyString = (message: string) => zod.string({message}).min(1, {message})


export enum PaymentMethodEnum {
   CREDIT_CARD ="creditCard", 
   PAYPAL = "paypal", 
   BANKTRANSFER ="bankTransfer"
}

  const creditCardSchema = zod.object({
   type: zod.literal(PaymentMethodEnum.CREDIT_CARD),
   cardNumber: zod.string().regex(/^\d{16}$/, "The card number must contain 16 digits"),
   cvv: zod.string().regex(/^\d{3}$/, "The Card Validation Code must contain 3 digits"),
 })

 const paypalSchema =  zod.object({
   type: zod.literal(PaymentMethodEnum.PAYPAL),
   email: zod.string().email("PayPal email is invalid"),
 })

 const bankTransferSchema =  zod.object({
   type: zod.literal(PaymentMethodEnum.BANKTRANSFER),
   accountNumber: IsNotEmptyString("The account number must contain at least 10 characters"),
   bankCode: IsNotEmptyString("The bank code must contain at least 4 characters")
 })

export const paymentMethodSchema =  () => zod.discriminatedUnion("type",[
   creditCardSchema, paypalSchema,bankTransferSchema
]); 

export type PaymentMethodSchemaType = zod.infer < ReturnType <typeof paymentMethodSchema>>

How does validation work?

discriminatedUnion inspects the type field:
- If type is ‘creditCard’, Zod validates according to the constraints defined in the first object.
- If type is ‘paypal’, it checks only the rules linked to the PayPal object.
- If type is ‘bankTransfer’, it validates according to the bank transfer criteria.
Strict validation :
- Each type is independent. If a user provides an invalid type or omits a required field, Zod triggers a specific error.
Simplicity for React Hook Form:
- The schema allows RHF to dynamically adapt validation according to the type field, simplifying the logic in the form.

Why use a discriminatedUnion here?

Clear separation of responsibilities
- Each payment method specific rules that must not interfere with each other interfere.
Flexibility
- Allows new types (e.g. a new payment method) to be added easily. types (for example, a new payment method).
Security
- Ensures that any invalid values are detected at validation time.

Integration with React Hook Form

**
React Hook Form makes it easy to manage forms while remaining high-performance and flexible. Here's how to integrate Zod and RHF to validate a form based on discriminatedUnion.

import { useForm, SubmitHandler, FieldErrors } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import './payment.css';
import {
  PaymentMethodEnum,
  paymentMethodSchema,
  PaymentMethodSchemaType,
} from '../validators/validate-payment-schema';

const Payment = () => {
  const form = useForm<PaymentMethodSchemaType>({
    resolver: zodResolver(paymentMethodSchema()),
    defaultValues: {
      type: PaymentMethodEnum.CREDIT_CARD,
    },
  });

  const { register, formState, handleSubmit } = form;

  const { errors } = formState;

  const paymentType = form.watch().type;

  const handleChangePaymentType = (type: PaymentMethodEnum) => {
    form.setValue('type', type);
  };

  const handleResetForm = () => {
    form.reset(getDefaultFormState(paymentType));
  };

  const onSubmit: SubmitHandler<PaymentMethodSchemaType> = (data) => {
    console.log('data', data);
  };

  const PaymentTypeFormNode: React.ReactNode = (() => {
    switch (paymentType) {
      case PaymentMethodEnum.BANKTRANSFER:
        const bankTransferErrors = getErrorsByPaymentType(errors, paymentType);

        return (
          <div>
            <div className="form">
              <label>Account number</label>
              <input
                {...register('accountNumber')}
                placeholder="Enter your account number"
              />
              {bankTransferErrors?.accountNumber?.message && (
                <span className="errormessage">
                  {bankTransferErrors.accountNumber.message}
                </span>
              )}
            </div>

            <div className="form">
              <label>Bank code</label>
              <input
                {...register('bankCode')}
                placeholder="Enter your bank code"
              />
              {bankTransferErrors?.bankCode?.message && (
                <span className="errormessage">
                  {bankTransferErrors.bankCode.message}
                </span>
              )}
            </div>
          </div>
        );

      case PaymentMethodEnum.CREDIT_CARD:
        const creditCardErrors = getErrorsByPaymentType(errors, paymentType);
        return (
          <div>
            <div className="form">
              <label>Card Number</label>
              <input
                {...register('cardNumber')}
                placeholder="Enter your card number"
              />
              {creditCardErrors?.cardNumber && (
                <span className="errormessage">
                  {creditCardErrors.cardNumber.message}
                </span>
              )}
            </div>

            <div className="form">
              <label>CVV</label>
              <input
                {...register('cvv')}
                placeholder="Enter your card validation code"
              />
              {creditCardErrors?.cvv && (
                <span className="errormessage">
                  {creditCardErrors.cvv.message}
                </span>
              )}
            </div>
          </div>
        );

      case PaymentMethodEnum.PAYPAL:
        const paypalErrors = getErrorsByPaymentType(errors, paymentType);
        return (
          <div className="form">
            <label>Email</label>
            <input
              type="email"
              {...register('email')}
              placeholder="Enter your email"
            />
            {paypalErrors?.email?.message && (
              <span className="errormessage">{paypalErrors.email.message}</span>
            )}
          </div>
        );

      default:
        throw new Error(
          'Exhaustive Guard Error : received value' + paymentType
        );
    }
  })();

  return (
    <form className="form-wrapper" onSubmit={handleSubmit(onSubmit)}>
      <div className="form" style={{ marginBottom: '1rem' }}>
        <label>Type de paiement</label>
        <select
          value={paymentType}
          onChange={(e) =>
            handleChangePaymentType(e.target.value as PaymentMethodEnum)
          }
          style={{ display: 'block', marginTop: '0.5rem' }}
        >
          <option value="creditCard">Credit Card</option>
          <option value="paypal">PayPal</option>
          <option value="bankTransfer">Bank Transfer</option>
        </select>

        <span className="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="10"
            height="6"
            viewBox="0 0 10 6"
          >
            <path
              id="Tracé_532"
              data-name="Tracé 532"
              d="M295.717,353.232a.725.725,0,0,1,1.063,0,.8.8,0,0,1,.163.256.834.834,0,0,1,0,.606.8.8,0,0,1-.163.256l-4.248,4.418a.726.726,0,0,1-1.064,0l-4.248-4.418a.8.8,0,0,1-.163-.256.834.834,0,0,1,0-.606.8.8,0,0,1,.163-.256.725.725,0,0,1,1.063,0L292,356.856Z"
              transform="translate(-287 -353)"
              fill="#333"
            />
          </svg>
        </span>
      </div>

      {PaymentTypeFormNode}

      <div style={{ display: 'flex', gap: 20 }}>
        <button type="button" onClick={handleResetForm}>
          Cancel
        </button>
        <button type="submit" className="submit-btn">
          Submit
        </button>
      </div>
    </form>
  );
};

export default Payment;

function getErrorsByPaymentType<T extends PaymentMethodSchemaType['type']>(
  errors: FieldErrors<PaymentMethodSchemaType>,
  _type: T
): FieldErrors<Extract<PaymentMethodSchemaType, { type: T }>> | null {
  return errors as FieldErrors<Extract<PaymentMethodSchemaType, { type: T }>>;
}

const bankTransferDefault: Extract<
  PaymentMethodSchemaType,
  { type: PaymentMethodEnum.BANKTRANSFER }
> = {
  accountNumber: '',
  bankCode: '',
  type: PaymentMethodEnum.BANKTRANSFER,
};

const paypalDefault: Extract<
  PaymentMethodSchemaType,
  { type: PaymentMethodEnum.PAYPAL }
> = {
  email: '',
  type: PaymentMethodEnum.PAYPAL,
};

const creditCardDefault: Extract<
  PaymentMethodSchemaType,
  { type: PaymentMethodEnum.CREDIT_CARD }
> = {
  cardNumber: '',
  cvv: '',
  type: PaymentMethodEnum.CREDIT_CARD,
};

const defaultValue = [creditCardDefault, paypalDefault, bankTransferDefault];

const getDefaultFormState= (type: PaymentMethodEnum) => {
  return defaultValue.find(
    (item) => item.type === type
  ) as PaymentMethodSchemaType;
};

Conclusion

**
So that's it folks. I hope you found this article helpful. discriminatedUnion is a utility type that can be used in many ways. If you think there are more ways to use discriminatedUnion, please let me know in the comments. Thanks for reading this article. See you all in my next article🐸.

test application link:
https://stackblitz.com/edit/vitejs-vite-ppgw9zrb?file=src%2Fpages%2Fpayments.tsx