b53397d3.1d3d502d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{104:function(e,n,t){"use strict";t.d(n,"a",(function(){return l})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function s(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),d=function(e){var n=a.a.useContext(m),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},l=function(e){var n=d(e.components);return a.a.createElement(m.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},u=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,m=c(e,["components","mdxType","originalType","parentName"]),l=d(t),u=r,b=l["".concat(i,".").concat(u)]||l[u]||p[u]||o;return t?a.a.createElement(b,s(s({ref:n},m),{},{components:t})):a.a.createElement(b,s({ref:n},m))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=u;var s={};for(var c in n)hasOwnProperty.call(n,c)&&(s[c]=n[c]);s.originalType=e,s.mdxType="string"==typeof e?e:r,i[1]=s;for(var m=2;m<o;m++)i[m]=t[m];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"},91:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return o})),t.d(n,"metadata",(function(){return i})),t.d(n,"toc",(function(){return s})),t.d(n,"default",(function(){return m}));var r=t(3),a=(t(0),t(104));const o={id:"nested",title:"Nested Forms",sidebar_label:"Nested Forms",slug:"/nested"},i={unversionedId:"nested",id:"nested",isDocsHomePage:!1,title:"Nested Forms",description:"Formst makes it very easy to handle nested data. You can create nested forms by creating nested form models.",source:"@site/docs/Nested.md",slug:"/nested",permalink:"/docs/nested",editUrl:"https://github.com/formstjs/formst-docs/docs/Nested.md",version:"current",sidebar_label:"Nested Forms",sidebar:"someSidebar",previous:{title:"Validation",permalink:"/docs/validation"},next:{title:"Middleware",permalink:"/docs/middleware"}},s=[{value:"Usage",id:"usage",children:[]},{value:"Using this Formst instance in React:",id:"using-this-formst-instance-in-react",children:[]}],c={toc:s};function m({components:e,...n}){return Object(a.b)("wrapper",Object(r.a)({},c,n,{components:e,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Formst makes it very easy to handle nested data. You can create nested forms by creating nested form models."),Object(a.b)("h3",{id:"usage"},"Usage"),Object(a.b)("p",null,"In this example, CreateProject form model contains other form models, Milestone and ProjectTeam as shown below:"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-tsx"}),"const Milestone = createFormModel(\n  'Milestone',\n  {\n    name: types.string,\n  },\n  {\n    validation: {\n      name: (name) => {\n        if (!name) {\n          return 'Required';\n        }\n      },\n    },\n  },\n);\n\nconst ProjectTeam = createFormModel(\n  'ProjectTeam',\n  {\n    name: types.string,\n    lead: types.string,\n  },\n  {\n    validation: {\n      name: 'required',\n      lead: ['required', 'minLen'],\n    },\n  },\n);\n\nconst CreateProject = createFormModel(\n  'CreateProject',\n  {\n    name: types.string,\n    milestones: types.array(Milestone),\n    team: ProjectTeam,\n  },\n  {\n    validation: {\n      name: ['required'],\n      milestones: 'valid',\n      team: 'valid',\n    },\n  },\n);\n")),Object(a.b)("p",null,"Note: ",Object(a.b)("inlineCode",{parentName:"p"},"valid")," is required to ensure that the form checks the child form."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-tsx"}),"const createProjectForm = CreateProject.create({\n  projectTeam: {name: '', lead: ''},\n  milestones: [{name: ''}],\n});\n")),Object(a.b)("h3",{id:"using-this-formst-instance-in-react"},"Using this Formst instance in React:"),Object(a.b)("p",null,"If you want to use ",Object(a.b)("inlineCode",{parentName:"p"},"<Field />")," and ",Object(a.b)("inlineCode",{parentName:"p"},"<ErrorMessage />"),", you need to wrap your form inside ",Object(a.b)("inlineCode",{parentName:"p"},"<Formst />")," (as explained ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.notion.so/Formst-5ca92ac7368b42bb962048844c0d2f98"}),"here"),"). For nested forms, you have to nest ",Object(a.b)("inlineCode",{parentName:"p"},"<Formst />")," in the same way as form instances and pass their corresponding instances as a ",Object(a.b)("inlineCode",{parentName:"p"},"formInstance")," prop."),Object(a.b)("p",null,"This allows a nested ",Object(a.b)("inlineCode",{parentName:"p"},"<Field />")," to directly refer to the form instance to which it belongs using the ",Object(a.b)("inlineCode",{parentName:"p"},"name")," prop. Here's an example:"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-tsx"}),'const CreateProjectComponent = observer(() => {\n  createProjectForm.onSubmit(\n    (formInstance: Instance<typeof createProjectForm>) => {\n      console.log(formInstance.getFormData());\n      formInstance.setSubmitting(false);\n    },\n  );\n\n  // Root Formst component for root form instance\n  <Formst formInstance={createProjectForm}>\n    <form key={\'master\'} onSubmit={createProjectForm.handleSubmit}>\n      {createProjectForm.totalMilestone}\n      <div>\n        Project name:\n        {/* Using Field */}\n        <Field name="name" type="text" />\n        {/* Using input */}\n        <input\n          name="name"\n          value={createProjectForm.name}\n          onChange={createProjectForm.handleChange}\n          onBlur={createProjectForm.handleBlur}\n        />\n      </div>\n      <div>\n        <ErrorMessage name="name" />\n      </div>\n      <div style={{border: \'1px solid black\'}}>\n        {/* Nested Formst component for the nested instance */}\n        <Formst formInstance={createProjectForm.team}>\n          <div key={\'second\'}>\n            <div>\n              Team name:\n              {/* "name" value for name prop here refers to createProjectForm.team.name */}\n              <Field name="name" type="text" />\n            </div>\n            <div>\n              <ErrorMessage name="name" />\n            </div>\n            <div>\n              Lead name:\n              <Field name="lead" type="text" />\n            </div>\n            <div>\n              <ErrorMessage name="lead" />\n            </div>\n          </div>\n        </Formst>\n      </div>\n      {createProjectForm.milestones.map((milestone, index) => {\n        return (\n          <Formst formInstance={milestone} key={index}>\n            {/* Nested Formst component for the nested instance */}\n            <div key={index}>\n              <div>\n                Milestone name:\n                <input\n                  name="name"\n                  value={milestone.name}\n                  onChange={milestone.handleChange}\n                  onBlur={milestone.handleBlur}\n                />\n                <ErrorMessage name="name" />\n              </div>\n            </div>\n          </Formst>\n        );\n      })}\n      <button type="button" onClick={addMilestone}>\n        Add new milestone\n      </button>\n      <button type="submit">Submit</button>\n      {createProjectForm.isSubmitting ? (\n        <h1>submitting</h1>\n      ) : (\n        <h2>submitted</h2>\n      )}\n      {createProjectForm.isValid ? <h1>valid</h1> : <h2>not valid</h2>}\n    </form>\n  </Formst>;\n});\n')))}m.isMDXComponent=!0}}]);