{"id":1857,"date":"2024-10-07T23:29:54","date_gmt":"2024-10-07T16:29:54","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=1857"},"modified":"2024-10-15T23:31:01","modified_gmt":"2024-10-15T16:31:01","slug":"react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/","title":{"rendered":"React Hook Form &#8211; ph\u01b0\u01a1ng ph\u00e1p qu\u1ea3n l\u00fd form t\u1ed1i \u01b0u cho d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1857\" class=\"elementor elementor-1857\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddf45cf e-flex e-con-boxed e-con e-parent\" data-id=\"ddf45cf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63c51a1 elementor-widget elementor-widget-heading\" data-id=\"63c51a1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/#Mo_dau\" >M\u1edf \u0111\u1ea7u<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/#React-hook-form_la_gi\" >React-hook-form l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/#Cai_dat\" >C\u00e0i \u0111\u1eb7t<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/#Vi_du_co_ban\" >V\u00ed d\u1ee5 c\u01a1 b\u1ea3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/#Khai_niem_can_biet\" >Kh\u00e1i ni\u1ec7m c\u1ea7n bi\u1ebft<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/#useForm\" >useForm<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/#Tham_so_truyen_vao\" >Tham s\u1ed1 truy\u1ec1n v\u00e0o:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form\/#Gia_tri_tra_ve\" >Gi\u00e1 tr\u1ecb tr\u1ea3 v\u1ec1:<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Mo_dau\"><\/span>M\u1edf \u0111\u1ea7u<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3957d96 elementor-widget elementor-widget-text-editor\" data-id=\"3957d96\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>H\u1ea7u h\u1ebft trong c\u00e1c d\u1ef1 \u00e1n Front-end ai c\u0169ng tr\u1ea3i qua vi\u1ec7c x\u1eed l\u00fd form, n\u1ebfu l\u00e0m theo c\u00e1ch th\u1ee7 c\u00f4ng s\u1ebd t\u1ed1n r\u1ea5t nhi\u1ec1u th\u1eddi gian v\u00e0 r\u1eafc r\u1ed1i \u0111\u1ec3 x\u1eed l\u00fd. V\u00ec th\u1ebf trong b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh\u00a0 s\u1ebd gi\u1edbi thi\u1ec7u t\u1edbi c\u00e1c b\u1ea1n m\u1ed9t th\u01b0 vi\u1ec7n gi\u00fap ch\u00fang ta ti\u1ebft ki\u1ec7m th\u1eddi gian cho vi\u1ec7c qu\u1ea3n l\u00fd form, \u0111\u00f3 l\u00e0 <strong><a href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/\">react<\/a> hook form<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af4d774 elementor-widget elementor-widget-heading\" data-id=\"af4d774\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"React-hook-form_la_gi\"><\/span>React-hook-form l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-115125e elementor-widget elementor-widget-text-editor\" data-id=\"115125e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>hi\u1ec3u \u0111\u01a1n gi\u1ea3n th\u00ec react-hook-form l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n gi\u00fap qu\u1ea3n l\u00fd form t\u1ed1t nh\u1ea5t hi\u1ec7n nay m\u00e0 b\u1ea1n n\u00ean d\u00f9ng. V\u00e0 sau \u0111\u00e2y m\u00ecnh s\u1ebd gi\u1ea3i th\u00edch r\u00f5 v\u00e0 demo code v\u1edbi react.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe8e179 elementor-widget elementor-widget-heading\" data-id=\"fe8e179\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Cai_dat\"><\/span>C\u00e0i \u0111\u1eb7t<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90ab1ca elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"90ab1ca\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">NPM<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b34333 elementor-widget elementor-widget-code-highlight\" data-id=\"3b34333\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm install react-hook-form<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-762a7cb elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"762a7cb\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">YARN<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0c73e3 elementor-widget elementor-widget-code-highlight\" data-id=\"d0c73e3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>yarn add react-hook-form<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3c5b25 elementor-widget elementor-widget-heading\" data-id=\"a3c5b25\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Vi_du_co_ban\"><\/span>V\u00ed d\u1ee5 c\u01a1 b\u1ea3n<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b30a532 elementor-widget elementor-widget-text-editor\" data-id=\"b30a532\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: rgb(27, 27, 27); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 18px; letter-spacing: -0.054px;\">Sau \u0111\u00e2y t\u00f4i s\u1ebd c\u00f3 1 v\u00ed d\u1ee5 c\u01a1 b\u1ea3n v\u1ec1&nbsp;<\/span><span style=\"font-weight: bolder; color: rgb(27, 27, 27); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 18px; letter-spacing: -0.054px;\">React Hook Form&nbsp;<\/span><span style=\"color: rgb(27, 27, 27); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 18px; letter-spacing: -0.054px;\">\u0111\u1ec3 c\u00f3 gi\u00fap c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 hi\u1ec3u v\u1ec1 n\u1ed9i dung c\u00e2u l\u1ec7nh d\u00f9ng \u0111\u1ec3 l\u00e0m g\u00ec.<\/span><br><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f07fb2 elementor-widget elementor-widget-code-highlight\" data-id=\"0f07fb2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import React from \"react\";\r\nimport { useForm } from \"react-hook-form\";\r\n\r\nexport default function App() {\r\n  const { register, handleSubmit, formState: { errors } } = useForm({\r\n      criteriaMode: \"all\"\r\n  });\r\n\r\n  return (\r\n    \/\/ H\u00e0m handleSubmit s\u1ebd validate tr\u01b0\u1edbc khi g\u1ecdi h\u00e0m onSubmit\r\n    <form onSubmit={handleSubmit(onSubmit)}>\r\n\r\n      \/\/ \u0111\u0103ng k\u00ed input cho Hook v\u00f3i t\u00ean email \r\n      <input defaultValue=\"test\" {...register(\"email\")} \/>\r\n\r\n      \/\/ \u0111\u0103ng k\u00ed th\u1ebb input v\u1edbi React-Hook-Form v\u1edbi t\u00ean \"password\"\r\n      \/\/ validate l\u00e0 required\r\n      <input {...register(\"password\", { required: true })} \/>\r\n\r\n      \/\/ x\u1eed l\u00fd l\u1ed7i b\u1eb1ng <a href=\"https:\/\/fstack.io.vn\/blog\/lap-trinh-huong-doi-tuong-la-gi-mot-so-dac-trung-cua-oop\/\">\u0111\u1ed1i t\u01b0\u1ee3ng<\/a> errors \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb useForm\r\n      {errors.exampleRequired && <span>This field is required<\/span>}\r\n\r\n      <input type=\"submit\" \/>\r\n    <\/form>\r\n  );\r\n}\r\n\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef38dda elementor-widget elementor-widget-heading\" data-id=\"ef38dda\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Khai_niem_can_biet\"><\/span>Kh\u00e1i ni\u1ec7m c\u1ea7n bi\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4664edf elementor-widget elementor-widget-heading\" data-id=\"4664edf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"useForm\"><\/span>useForm<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0e5a42 elementor-widget elementor-widget-text-editor\" data-id=\"d0e5a42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0110\u1ec3 l\u00e0m vi\u1ec7c v\u1edbi React-Hook-Form \u0111\u1ea7u ti\u00ean ch\u00fang ta c\u1ea7n kh\u1edfi t\u1ea1o useForm<\/p><h4 style=\"margin: 0.6em 0px; font-weight: bold; line-height: 1.2; font-size: 1.15em; color: #1b1b1b; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-style: normal; letter-spacing: normal; text-transform: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\"><span class=\"ez-toc-section\" id=\"Tham_so_truyen_vao\"><\/span>Tham s\u1ed1 truy\u1ec1n v\u00e0o:<span class=\"ez-toc-section-end\"><\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c37aaac elementor-widget elementor-widget-code-highlight\" data-id=\"c37aaac\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp> const { register, handleSubmit, formState: { errors } } = useForm({\r\n      mode: 'onSubmit',\r\n      reValidateMode: 'onChange',\r\n      defaultValues: {},\r\n      resolver: undefined,\r\n      criteriaMode: \"firstError\",\r\n})\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c2d341 elementor-widget elementor-widget-text-editor\" data-id=\"3c2d341\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>M\u1ed9t v\u00e0i tham s\u1ed1 th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 truy\u1ec1n v\u00e0o&nbsp;<strong>useForm<\/strong>:<\/p>\n<p><b>defaultValues<\/b>: Thi\u1ebft l\u1eadp gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh (l\u1ea7n \u0111\u1ea7u) cho form.<\/p>\n<p><b>mode<\/b>: c\u00f3 c\u00e1c gi\u00e1 tr\u1ecb <b>onChange | onBlur | onSubmit | onTouched | all <\/b>. D\u00f9ng \u0111\u1ec3 c\u1ea5u h\u00ecnh chi\u1ebfn l\u01b0\u1ee3c validate tr\u01b0\u1edbc khi submit form.<\/p>\n<p><b>resolver<\/b>: h\u1ed7 tr\u1ee3 validate \u0111\u1ed1i v\u1edbi th\u1ec9t-party (yup).<\/p>\n<h4 style=\"font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-weight: bold; line-height: 1.2; color: rgb(27, 27, 27); font-size: 1.15em; font-style: normal; text-transform: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; letter-spacing: normal; text-align: start; margin: 0.6em 0px;\"><span class=\"ez-toc-section\" id=\"Gia_tri_tra_ve\"><\/span>Gi\u00e1 tr\u1ecb tr\u1ea3 v\u1ec1:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div><br><b>Register<\/b>: l\u00e0 m\u1ed9t trong nh\u1eefng n\u1ed9i dung ch\u00ednh c\u1ee7a react hook form, n\u00f3 d\u00f9ng \u0111\u1ec3 \u0111\u0103ng k\u00ed component c\u1ee7a b\u1ea1n v\u1edbi hook.<\/div>\n<div>v\u00ed d\u1ee5:<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-084e2c6 elementor-widget elementor-widget-code-highlight\" data-id=\"084e2c6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function App() {\r\n  const { register, handleSubmi, reset } = useForm();\r\n\r\n  const onSubmit = (data) => {\r\n      console.log(data);  \/\/ { eemail: ... }\r\n      const data = gatDataService();\r\n      reset(data);\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <form onSubmit={handleSubmit(onSubmit)}>\r\n        <input {...register(\"email\", {\r\n        \/\/ validate\r\n        required: true\r\n\r\n        \/\/ b\u1eaft s\u1ef1 ki\u1ec7n khi thay \u0111\u1ed5i gi\u00e1 tr\u1ecb input\r\n        onChange: (e) => console.log(e) \r\n        \/\/ b\u1eaft s\u1ef1 ki\u1ec7n khi Blur chu\u1ed9t\r\n        onBlur: (e) => console.log(e) \r\n        })} \/>        \r\n        <input type=\"submit\" \/>\r\n      <\/form>\r\n    <\/>\r\n  );\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53b8291 elementor-widget elementor-widget-text-editor\" data-id=\"53b8291\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>handleSubmit<\/b>: n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n sau khi validate th\u00e0nh c\u00f4ng. Nh\u01b0 v\u00ed d\u1ee5 tr\u00ean n\u00f3 s\u1ebd g\u1ecdi h\u00e0m onSubmit .<\/p><p><b>reset<\/b>: d\u00f9ng \u0111\u1ec3 \u0111\u1eb7t l\u1ea1i gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh cho Form (th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 sau khi call API ch\u00fang ta \u0111\u1eb7t l\u1ea1i gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh cho Form).<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>M\u1edf \u0111\u1ea7u H\u1ea7u h\u1ebft trong c\u00e1c d\u1ef1 \u00e1n Front-end ai c\u0169ng tr\u1ea3i qua vi\u1ec7c x\u1eed l\u00fd form, n\u1ebfu l\u00e0m theo c\u00e1ch th\u1ee7 c\u00f4ng s\u1ebd t\u1ed1n r\u1ea5t nhi\u1ec1u th\u1eddi gian v\u00e0 r\u1eafc r\u1ed1i \u0111\u1ec3 x\u1eed l\u00fd. V\u00ec th\u1ebf trong b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh\u00a0 s\u1ebd gi\u1edbi thi\u1ec7u t\u1edbi c\u00e1c b\u1ea1n m\u1ed9t th\u01b0 vi\u1ec7n gi\u00fap ch\u00fang ta ti\u1ebft [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1868,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43,1],"tags":[28],"class_list":["post-1857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-cong-nghe","category-cong-nghe","tag-react"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/react-hook-form.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=1857"}],"version-history":[{"count":76,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1857\/revisions"}],"predecessor-version":[{"id":2301,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1857\/revisions\/2301"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/1868"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=1857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=1857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=1857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}