?? ??? ??? ?? ? ??????? ??? ?????. RHF(React Hook Form) ? Zod? ?? ?????? ???? ?? ??? ?? ??? ??? ???? ?? ??? ????? ??? ? ????. ? ????? Zod? RHF? ?? ???? ??? discriminateUnion? ???? ???? ??? ???? ??? ?????.

DiscriminatedUnion?? ??????

discriminatedUnion? ??? ???? ?? ?? ??? ???? ??? ????? ? ???? ?? ??? ?????. ? ?? ??? ?? ?? ?? ??? ???? ?? ?? ?? ?? ??? ???? ? ?????.
?? ?? ? ?? ??? ?? ??? ??? ?? ??? ??? ???.

1. ????(?? ?? ? CVV ??)
2. PayPal(??? ?? ??)
3. ?? ??(?? ?? ? ?? ?? ??) ??? ? ??? discriminateUnion? ???? ???? ? ????. 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>>

**

??? ??? ??? ??????

**

1. DiscriminatedUnion? ?? ??? ?????.

   • ??? 'creditCard'? ?? Zod? ??? ?? ???? ?????. ? ?? ??? ??? ?? ??
   • ??? 'paypal'? ?? ??? ??? ?????. PayPal ???.
   • ??? 'bankTransfer'? ?? ??? ?? ???? ?????. ???? ??

2. ??? ?? :

   • ? ??? ??????. ???? ?? ??? ??? ????? ?? ??? ???????. Zod? ?? ??? ?????.

3. React Hook ??? ???:

   • ???? ?? RHF? ??? ??? ???? ??? ? ????. ?? ??? ?? ??? ??????. ?????.

**

??? discriminateUnion? ???? ??? ??????

**

1. ??? ?? ??
   • ? ?? ??? ??? ??? ????. ?? ?????.
2. ???
   • ??? ?? ??(?: ??? ??) ??)? ?? ??? ? ????. ??(?: ??? ?? ??)
3. ??
   • ??? ?? ?????? ?????. ?? ?????.

**

React Hook ??? ??

**
React Hook Form? ???? ???? ???? ????? ??? ?? ??? ? ????. DiscriminateUnion? ???? ??? ???? ?? Zod? RHF? ???? ??? ??? ????.

'react-hook-form'?? { useForm, SubmitHandler, FieldErrors } ????;
import { zodResolver } from '@hookform/resolvers/zod';
???? './??.css';
?? {
  ?? ??Enum,
  ?? ?????,
  ?? ????? ??,
} '../validators/validate-??-???'??;

const ?? = () => {
  const form = useForm<PaymentMethodSchemaType>({
    ?? ????: zodResolver(?? ?? ???()),
    ???: {
      ??: PaymentMethodEnum.CREDIT_CARD,
    },
  });

  const { ????, formState, handlerSubmit } = ??;

  const { ?? } = formState;

  const PaymentType = form.watch().type;

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

  const handlerResetForm = () => {
    form.reset(GetErrorState(?? ??));
  };

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

  const PaymentTypeFormNode: React.ReactNode = (() => {
    ???(?? ??) {
      ?? PaymentMethodEnum.BANKTRANSFER:
        constbankTransferErrors = getErrorsByPaymentType(errors, PaymentType);

        ?? (
          <div>
            <div className="form">
              <??>????</??>
              <??
                {...??('????')}
                placeholder="????? ?????"
              />
              {bankTransferErrors?.accountNumber?.message && (
                <span className="errormessage">
                  {bankTransferErrors.accountNumber.message}
                </??>
              )}
            </div>

            <div className="form">
              <??>?? ??</??>
              <??
                {...??('????')}
                placeholder="?? ??? ?????"
              />
              {bankTransferErrors?.bankCode?.message && (
                <span className="errormessage">
                  {bankTransferErrors.bankCode.message}
                </??>
              )}
            </div>
          </div>
        );

      ?? PaymentMethodEnum.CREDIT_CARD:
        const CreditCardErrors = getErrorsByPaymentType(errors, PaymentType);
        ?? (
          <div>
            <div className="form">
              <??>????</??>
              <??
                {...??('????')}
                placeholder="????? ?????"
              />
              {creditCardErrors?.cardNumber && (
                <span className="errormessage">
                  {creditCardErrors.cardNumber.message}
                </??>
              )}
            </div>

            <div className="form">
              <??>CVV</label>
              <??
                {...??('cvv')}
                placeholder="?? ?? ??? ?????"
              />
              {creditCardErrors?.cvv && (
                <span className="errormessage">
                  {creditCardErrors.cvv.message}
                </??>
              )}
            </div>
          </div>
        );

      ?? PaymentMethodEnum.PAYPAL:
        const paypalErrors = getErrorsByPaymentType(errors, PaymentType);
        ?? (
          <div className="form">
            <??>???</??>
            <??
              ??="???"
              {...??('???')}
              placeholder="???? ?????"
            />
            {paypalErrors?.email?.message && (
              <span className="errormessage">{paypalErrors.email.message}</span>
            )}
          </div>
        );

      ??:
        ??? ?? ??(
          '??? ?? ??: ?? ?' ?? ??
        );
    }
  })();

  ?? (
    <form className="form-wrapper" onSubmit={handleSubmit(onSubmit)}>
      <div className="??">



<p>**</p>

<h2>
  
  
  ??
</h2>

<p>**<br>
?? ????. ? ??? ??? ???? ????. discriminateUnion? ??? ???? ??? ? ?? ???? ?????. DiscriminateUnion? ???? ? ?? ??? ??? ????? ??? ?????. ? ??? ????? ?????. ?? ??? ?? ???? ? ????.</p>

<p>??? ?? ??: <br>
https://stackblitz.com/edit/vitejs-vite-ppgw9zrb?file=src/pages/paids.tsx</p>


          

            
        

? ??? DiscriminateUnion ? React Hook Form? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!