<script lang="ts">  import { useForm, Field, defineRule } from "svelte-reactive-form";  import { required, minLength } from "@svelte-reactive-form/rules";   // define the global validation rules  defineRule("required", required);  defineRule("minLength", minLength);  defineRule("numeric", (val: any) => {  return /[0-9]+/.test(val) || "invalid numeric format";  });   // initialize the form instance  const form$ = useForm<{ name: string; pin: string; description: string }>();  const { field, register, setValue, control, onSubmit } = form$;   // you can register your field manually  register("pin", {  defaultValue: "",  rules: ["required", "minLength:4", "numeric"]  });   const submitCallback = onSubmit((data, e) => {  console.log("Data =>", data);  console.log("Event =>", e);  }, (err, e) => {  console.log("Error =>", err);  console.log("Event =>", e);  }); </script> <form on:submit={submitCallback}> <Field {control} name="name" rules="required" let:errors let:onChange> <Component {onChange} /> {#each errors as item} <div>{item}</div> {/each} </Field> <!-- manually handle set value --> <input type="text" on:input={(e) => setValue("pin", e.target.value)} /> <!-- register field using svelte actions --> <input name="description" type="text" use:field={{ rules: ["required"] }}> <button disabled={!$form$.valid}> {#if $form$.submitting}Submit{:else}Submiting...{/if} </button> </form>