diff --git a/packages/example-next/src/routes/form.tsx b/packages/example-next/src/routes/form.tsx index 9763951..da3d021 100644 --- a/packages/example-next/src/routes/form.tsx +++ b/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*() { }}> emailField.setValue(event.currentTarget.value)} + value={emailInput.value} + onChange={event => emailInput.setValue(event.currentTarget.value)} placeholder="Email" /> passwordField.setValue(event.currentTarget.value)} + value={passwordInput.value} + onChange={event => passwordInput.setValue(event.currentTarget.value)} placeholder="Password" type="password" />