Form error message

resources/js/components/PerceptronSetup.vue

@@ -24,6 +24,7 @@ import CardContent from './ui/card/CardContent.vue';
 import CardHeader from './ui/card/CardHeader.vue';
 import CardTitle from './ui/card/CardTitle.vue';
 import Input from './ui/input/Input.vue';
+import FormError from './ui/form/FormError.vue';
 
 const props = defineProps<{
     type: PerceptronType;
@@ -52,7 +53,7 @@ const maxIterationsInput = ref<{
 } | null>(null);
 const form = useForm({
     type: props.type,
-    dataset: '',
+    dataset: selectedDatasetCopy.value,
     weight_init_method: selectedMethod.value,
     hidden_layers: hiddenLayers.value,
     hidden_layers_neurons: hiddenLayersNeurons.value,
@@ -95,6 +96,8 @@ watch(maxIterations, (value) => {
 });
 
 watch(selectedDatasetCopy, (newvalue) => {
+    form.clearErrors('dataset');
+
     const selectedDatasetCopy = props.datasets.find(
         (dataset) => dataset.label === newvalue
     ) || null;
@@ -129,7 +132,11 @@ const trainingId  = ref<string>('');
 
 function startTraining() {
     if (!selectedDatasetCopy.value) {
-        alert('Veuillez sélectionner un dataset avant de lancer l\'entraînement.');
+        form.setError(
+            'dataset',
+            'Un dataset est nécessaire avant de lancer l\'entraînement.',
+        );
+        console.log(form.errors);
         return;
     }
 
@@ -199,7 +206,7 @@ watch(selectedDatasetCopy, (newValue) => {
                                 </NativeSelectOption>
                             </NativeSelect>
                         </FormControl>
-                        <div v-if="props.errors?.selectedDatasetCopy">{{ props.errors?.selectedDatasetCopy }}</div>
+                        <FormError :error="form.errors.dataset || props.errors?.selectedDatasetCopy" />
                     </FormItem>
                 </FormField>
 

resources/js/components/ui/form/FormError.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+
+const props = defineProps<{
+  error?: string
+}>()
+</script>
+
+<template>
+    <div class="text-sm text-red-500">{{ props.error }}</div>
+</template>