small refactoring of oForm machine

src/lib/components/Recipies/oForm.svelte

@@ -4,6 +4,8 @@
 	import { afterUpdate } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
+	import { interpret } from 'xstate';
+	import { formMachine } from './machines/formMachine';
 
 	export let store;
 	export let services;
@@ -32,6 +34,14 @@
 
 	const successMessage = writable<string | null>(null);
 
+	// Create a service to interpret the machine
+	const validationService = interpret(formMachine).start();
+
+	// Subscribe to state changes
+	validationService.subscribe((state) => {
+		$store.isValidated = state.context.isValidated;
+	});
+
 	// Update the isValidated property of the store whenever the errors object changes
 	$: {
 		$store.isValidated = !(
@@ -41,6 +51,13 @@
 			$errors.age ||
 			$errors.favoriteFood
 		);
+
+		// Send events to the state machine based on the validation status
+		if ($store.isValidated) {
+			validationService.send('VALIDATE');
+		} else {
+			validationService.send('INVALIDATE');
+		}
 	}
 
 	async function handleSubmit() {