Server errors are not shown if there is no client validation rules

[martinszeltins]

"@regle/core": "0.2.5",
"@regle/rules": "0.2.5",

There still seems to be an issue with server errors. There could be a case where I don't have any client-side validation rules but only backend/server validation error messages. If I don't have any client validation rules but only server errors then we have multiple problems. There could also be a case where some fields have client errors but other fields don't have client errors.

1. The types break The field error type becomes possibly undefined. referenceNumber?: string[] | undefined; For me it says name field does not exist at all.

2. The server errors do not show up at all

Reproduction link: https://stackblitz.com/~/github.com/martinszeltins/regle-issue-5

pages/index.vue

<template>
    <div>
        <h1 class="font-bold text-2xl">New Shipment</h1>

        <div class="bg-white shadow-lg rounded-lg p-5 mt-5">
            <h2 class="font-semibold">Shipment Data</h2>

            <!-- Shipment Reference Number -->
            <div class="mt-4 flex flex-col gap-2">
                <div class="flex gap-2">
                    <label class="font-medium uppercase text-xs text-gray-700">Shipment Reference Number</label>
                </div>

                <input v-model="form.referenceNumber" type="text" class="w-1/2 ring-1 ring-gray-300 rounded outline-none p-2" />

                <FieldError :errors="r$.$errors.referenceNumber" />
            </div>

            <!-- Shipment Items -->
            <h3 class="font-semibold my-4">Shipment Items</h3>

            <div v-for="(_, index) in form.shipmentItems" class="border border-dashed border-gray-300 p-4 rounded-lg mt-4">
                <h3 class="font-semibold uppercase text-xs text-gray-700 mb-3">
                    Item {{ index + 1 }}
                </h3>

                <div class="grid grid-cols-2 gap-x-6 gap-y-4">
                    <div class="flex flex-col gap-2">
                        <div class="flex gap-1">    
                            <label class="font-medium uppercase text-xs text-gray-700">Item Name</label>
                        </div>

                        <input v-model="form.shipmentItems[index].name" type="text" class="ring-1 ring-gray-300 rounded outline-none p-2" />
                        <FieldError :errors="r$.$errors.shipmentItems?.$each?.[index]?.name" />
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <button class="bg-blue-500 text-white px-10 py-3 rounded mt-6 hover:bg-blue-600 transition">
                Save
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useRegle } from '@regle/core'
    import type { RegleExternalErrorTree } from '@regle/core'

    interface Form {
        referenceNumber: string
        shipmentItems: {
            name: string
        }[]
    }

    const form = ref({
        referenceNumber: '',
        shipmentItems: [
            { name: '' },
            { name: '' }
        ]
    })

    const externalErrors = ref<RegleExternalErrorTree<Form>>({
        referenceNumber: ['Backend says reference number is invalid'],
        shipmentItems: {
            $each: [
                {
                    name: ['Backend says shipmentItem[0].name is invalid'],
                },
            ],
        }
    })

    const { r$ } = useRegle(form, {}, { externalErrors })
</script>

[victorgarciaesgi]

I'll look into this today! Thanks for reporting

[victorgarciaesgi]

Fixed in 0.2.6. My types are becoming a nightmare 😂

[victorgarciaesgi]

I will focus on finishing my unit tests and type tests

[martinszeltins]

I will focus on finishing my unit tests and type tests

I think this is a REALLY good idea. 👍🏻 For such a complex library it is very important to have 100% test coverage to make sure everything really works as expected and that things don't break with code changes. Have lots of tests!

[martinszeltins]

@victorgarciaesgi I still don't see the external errors in my form 😞

Screenshot:

[victorgarciaesgi]

Yep I know! I have a lot already but not enough! I was beginning to write the externalErrors 😂 Found my mistake, will make another release. Also what behaviour is the best with externalErrors (never used it in real cases) Do the errors have to go once the field is touched? Or do they stay?

[martinszeltins]

Yep I know! I have a lot already but not enough! I was beginning to write the externalErrors 😂 Found my mistake, will make another release. Also what behaviour is the best with externalErrors (never used it in real cases) Do the errors have to go once the field is touched? Or do they stay?

In Vuelidate the external errors were cleared automatically IF you used $model to bind it to your form. Otherwise, they stayed until you called $clearExternalResults or you reset the whole form. I guess rewardEarly also plays a role.

If user does not bind the $model or the $value (regle) in the form but binds the original form model then I think it would be very nice to have an option to clear the external errors when a field is touched/changed. It would be nice if this was configurable.

So, 1) You validate the form, 2) backend sends field errors 3) you change that field value and the backend error goes away. (or not, depending on configuration)

https://vuelidate-next.netlify.app/advanced_usage.html#clearing-externalresults

[victorgarciaesgi]

I'm helping myself with Vuelidate specs to know the behaviours that's what I understood from it! Thanks I will work on this on add a configurable way other than rewardEarly to clean the errors Thanks for your help!

[victorgarciaesgi]

Still an issue when clearing external errors, will be fixed on next version