Validation using Laravel, inertia.js, vue3 & typescript

[pefremidis]

Hello,

I need some guidance to finish up with the new architecture using laravel data and typescript transformer.

The case is pretty simple.

I am building a create form for a Credit model that consist of other model for example a Supplier. (a Supplier belongs to a Credit)

My initial approach was to create a CreditData and a CreditRequestData.
After thought I realized that all the fields that lived inside CreditRequestData were actually a subset of fields of CreditData.
So it felt more appropriate to me to only have one Data class that relates to my model that is responsible of transforming my data as well as validate them.

I tried two approaches

First

CreditData.php

/** @typescript */
class CreditData extends Data
{
    public function __construct(
        public int                   $id,
        public string                $amount,
        public SupplierData          $supplier,
    )
    {
    }

    public static function fromModel(Credit $credit): self
    {
        return new self(
            id: $credit->id,
            amount: Number::currency($credit->amount, in: 'EUR', locale: 'el'),
            supplier: SupplierData::from($credit->supplier),
        );
    }

    public static function rules(): array
    {
        return [
            'id' => 'nullable',
            'supplier' => 'required',
            'amount' => 'required|numeric|min:0',
        ];
    }
}

CreditController.php

public function create()
{
    return Inertia::render('Admin/Credit/Create', [
        'credit' => CreditData::empty(),
    ]);
}

public function store(CreditData $request)
{
    $credit = Credit::query()
        ->create([
            'supplier_id' => $request->supplier->id,
            'amount' => $request->amount,
        ]);

    return redirect()
        ->route('admin.credits.show', $credit);
}

Create.vue

const props = defineProps<{
    credit: App.Data.Credit.CreditData
}>()

const form = useForm<App.Data.Credit.CreditData>(props.credit)

const submit = () => {
    form.post(route('admin.credits.store'))
}

response

{
    "amount": "Το πεδίο Ποσό είναι υποχρεωτικό",
    "supplier.id": "validation.required",
    "supplier.galaxyCode": "validation.required",
    "supplier.name": "validation.required",
    "supplier.displayName": "validation.required",
    "supplier.can.view": "validation.boolean",
    "supplier.can.viewCredits": "validation.boolean",
    "supplier.can.update": "validation.boolean",
    "supplier.can.delete": "validation.boolean",
    "supplier.numberOfCredits": "validation.required",
}

the above response would be great if it had the supplier key as well.
This is a problem because I have form.errors.supplier and it needs form.errors['supplier.id'] which is not ok with typescript as it assumes that form.errors only has the supplier key

I could simply ignore this but I feel I am so close

Thank you very much