packages/example-next/src/routes/form.tsx

@@ -11,17 +11,21 @@ const RegisterSchema = Schema.Struct({
 })
 
 const RegisterRouteComponent = Component.make("RegisterRouteView")(function*() {
-    const form = yield* Component.useOnMount(() => MutationForm.service({
-        schema: RegisterSchema,
-        initialEncodedValue: { email: "", password: "" },
-        f: ([value]) => Effect.log(`Registered ${value.email}`),
+    const [form, emailField, passwordField] = yield* Component.useOnMount(() => Effect.gen(function*() {
+        const form = yield* MutationForm.service({
+            schema: RegisterSchema,
+            initialEncodedValue: { email: "", password: "" },
+            f: ([value]) => Effect.log(`Registered ${value.email}`),
+        })
+
+        const emailField = Form.focusObjectOn(form, "email")
+        const passwordField = Form.focusObjectOn(form, "password")
+
+        return [form, emailField, passwordField] as const
     }))
-    const emailField = yield* Form.useInput(
-        Form.focusObjectOn(form, "email"),
-    )
-    const passwordField = yield* Form.useInput(
-        Form.focusObjectOn(form, "password"),
-    )
+
+    const emailInput = yield* Form.useInput(emailField)
+    const passwordInput = yield* Form.useInput(passwordField)
     const [canCommit, isCommitting] = yield* View.useAll([
         form.canCommit,
         form.isCommitting,
@@ -36,13 +40,13 @@ const RegisterRouteComponent = Component.make("RegisterRouteView")(function*() {
             }}>
                 <Flex direction="column" gap="2">
                     <TextField.Root
-                        value={emailField.value}
-                        onChange={event => emailField.setValue(event.currentTarget.value)}
+                        value={emailInput.value}
+                        onChange={event => emailInput.setValue(event.currentTarget.value)}
                         placeholder="Email"
                     />
                     <TextField.Root
-                        value={passwordField.value}
-                        onChange={event => passwordField.setValue(event.currentTarget.value)}
+                        value={passwordInput.value}
+                        onChange={event => passwordInput.setValue(event.currentTarget.value)}
                         placeholder="Password"
                         type="password"
                     />