Forms as business logic.
import { createHtmlForm } from '@reformed/html';
import { Form, useForm } from '@reformed/react';
const form = createHtmlForm({
fields: {
login: [
'',
{
required: true
}
],
password: [
'',
{
required: true
}
],
comfirmPassword: [
'',
{
required: true
}
]
},
validate: {
on: 'submit',
fn: ({ password, comfirmPassword }) => {
if (password !== comfirmPassword) {
return {
comfirmPassword: 'should be equal to password'
};
}
}
},
submit: {
mapParams: omit(['comfirmPassword']),
fn: submitFx
}
});
sample({
clock: form.submitFailed
});
sample({
clock: form.submitted,
target: HomePage.route.open
});
// ...
function MyForm() {
const { register } = useForm(form);
return (
<Form form={form} className="space-y-4">
<FieldLayout label="Login">
<input {...register('login')} />
</FieldLayout>
<FieldLayout label="Password">
<input type="password" {...register('password')} />
</FieldLayout>
<FieldLayout label="Confirm password">
<input type="password" {...register('confirmPassword')} />
</FieldLayout>
<Button type="submit">Login</Button>
</Form>
);
}
WIP
Reformed inspired by ...