Tengo un formulario creado con el formulario de enlace React y el campo de entrada que puede tener 2 valores diferentes: un correo electrónico pec o un código SDI con validación diferente.

Recibo un error con la validación: sigue diciéndome que sdi debe tener 7 caracteres pero el nombre está configurado como "pecEmail". También en la carga de la página, "nombre" se establece en "sdiCode", pero si ya hay un correo electrónico allí, debería ser "correo electrónico". Cambia cuando hago clic en la entrada. Intenté pasar el campo de nombre en el registro pero perdí toda la validación

 ref={register(isPec ? 'pecEmail' : 'sdiCode', {

código aquí:

 const [isPec, setIsPec] = useState() const sdiOrPec = watch(['sdiCode', 'pecEmail']) useEffect(() => { setIsPec( (sdiOrPec.sdiCode && sdiOrPec.sdiCode.includes('@')) || (sdiOrPec.pecEmail && sdiOrPec.pecEmail.includes('@')) ) }, [watch]) <div className='input-container'> <div className={`input-container__item ${ errors[isPec ? 'pecEmail' : 'sdiCode'] && 'has-error' }`} > <label>{t('components.BillingInfoForm.sdiLabel')}</label> <input type='text' name={!isPec ? 'sdiCode' : 'pecEmail'} defaultValue={ get(billingInformations, 'sdiCode') ? get(billingInformations, 'sdiCode') : get(billingInformations, 'pecEmail') ? get(billingInformations, 'pecEmail') : '' } placeholder={t('components.BillingInfoForm.sdiPlaceholder')} ref={register({ maxLength: { value: isPec ? 320 : 7, message: !isPec && t('components.BillingInfoForm.sdiMessageError'), }, minLength: { value: isPec ? 3 : 7, message: !isPec && t('components.BillingInfoForm.sdiMessageError'), }, validate: { value: (value) => { if (isPec && sdiOrPec.pecEmail) { return ( isEmailValid(sdiOrPec.pecEmail) || t('components.SignupForm.emailError') ) } }, }, })} /> {errors[isPec ? 'pecEmail' : 'sdiCode'] && ( <small> {errors[isPec ? 'pecEmail' : 'sdiCode'].message} </small> )} </div> </div>

Gracias