packages/effect-fc/src/Form.ts

@@ -11,6 +11,7 @@ export type TypeId = typeof TypeId
 export interface Form<in out A, in out I = A, out R = never>
 extends Pipeable.Pipeable {
     readonly schema: Schema.Schema<A, I, R>,
+    /** A reference to the latest valid value produced by the form, if any. */
     readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
     readonly encodedValueRef: SubscriptionRef.SubscriptionRef<I>,
     readonly errorRef: SubscriptionRef.SubscriptionRef<Option.Option<ParseResult.ParseError>>,
@@ -73,7 +74,7 @@ export const make: {
 const run = <A, I, R>(self: Form<A, I, R>) => Stream.runForEach(
     self.encodedValueRef.changes,
     flow(
-        Schema.decode(self.schema),
+        Schema.decode(self.schema, { errors: "all" }),
         Effect.andThen(v => SubscriptionRef.set(self.valueRef, Option.some(v))),
         Effect.andThen(SubscriptionRef.set(self.errorRef, Option.none())),
         Effect.catchTag("ParseError", e => SubscriptionRef.set(self.errorRef, Option.some(e)))

packages/example/src/routes/form.tsx

@@ -6,8 +6,18 @@ import { Component, Form } from "effect-fc"
 import { useContext, useFork } from "effect-fc/hooks"
 
 
+const email = Schema.pattern<typeof Schema.String>(
+    /^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i,
+
+    {
+        identifier: "email",
+        title: "email",
+        message: () => "Not an email address",
+    },
+)
+
 const RegisterFormSchema = Schema.Struct({
-    email: Schema.String,
+    email: Schema.String.pipe(email),
     password: Schema.String.pipe(Schema.minLength(3)),
 })
 
@@ -24,6 +34,7 @@ class RegisterPage extends Component.makeUntraced(function* RegisterPage() {
     const passwordInput = yield* Form.useInput(form, ["password"], { debounce: "200 millis" })
 
     yield* useFork(() => Stream.runForEach(form.valueRef.changes, Console.log), [])
+    // yield* useFork(() => Stream.runForEach(form.errorRef.changes, Console.log), [])
 
     return (
         <Container>