Last active
January 8, 2022 12:22
-
-
Save hmetgundogdu/31e0da28ce5d2ca91468f3c09cc53604 to your computer and use it in GitHub Desktop.
Thats how i handle form data lifecycle with react hook form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export interface IBaseCustomMapper { | |
| fromDto(dto: any): any | Promise<any>; | |
| toDto(model: any): any | Promise<any>; | |
| } | |
| export interface BaseFormModel { | |
| getMapper(): IBaseCustomMapper; | |
| getDefaults(): BaseFormModel | Promise<BaseFormModel>; | |
| } | |
| abstract class BaseFormMapper<InModel, Model extends InModel, OutModel> implements IBaseCustomMapper { | |
| abstract fromDto(inModel: InModel): Model | Promise<Model>; | |
| abstract toDto(model: Model): OutModel | Promise<OutModel>; | |
| } | |
| export default class FooFormModel implements BaseFormModel { | |
| email: string = ""; | |
| password: string = ""; | |
| getMapper() { | |
| return new FooFormMapper(); | |
| } | |
| getDefaults() { | |
| return new FooFormModel(); | |
| } | |
| } | |
| class FooFormMapper implements BaseFormMapper<FooFormModel, FooFormModel, FooFormModel> { | |
| fromDto(inModel: FooFormModel): FooFormModel | Promise<FooFormModel> { | |
| throw new Error("Method not implemented."); | |
| } | |
| toDto(model: FooFormModel): FooFormModel | Promise<FooFormModel> { | |
| throw new Error("Method not implemented."); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useForm, Controller } from 'react-hook-form' | |
| // Locals | |
| import FooFormModel from './FooFormModel' | |
| function FooForm() { | |
| const form = useForm<FooFormModel>({ defaults: new FooFormModel()}); | |
| const { control } = form; | |
| const handleSubmit = (formData : FooFormModel) => { | |
| // const formData = form.getValues(); | |
| const formMapper = new FooFormModel().getMapper(); | |
| const serviceData = formMapper.toDto(formData); | |
| // fetch(/** send service data **/) | |
| } | |
| const handleResetButtonClick = (formData : FooFormModel) => { | |
| form.reset(new FormModel().getDefaults()); | |
| } | |
| return( | |
| <div> | |
| <div> | |
| <Controller | |
| name="email" | |
| control={control} | |
| render={({ field }) => <input {...field}> | |
| </div> | |
| <div> | |
| <Controller | |
| name="password" | |
| control={control} | |
| render={({ field }) => <input {...field}> | |
| </div> | |
| <div> | |
| <button onClick={handleResetButtonClick}>Reset</button> | |
| <button onClick={form.handleSubmit(handleSubmit)}>Submit</button> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export default FooForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment