b8066252.66c747a8.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{84:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),n.d(t,"metadata",(function(){return i})),n.d(t,"toc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(3),a=n(7),o=(n(0),n(97)),l={id:"lifecycle",title:"Formula Lifecycle",sidebar_label:"Formula Lifecycle"},i={unversionedId:"lifecycle",id:"lifecycle",isDocsHomePage:!1,title:"Formula Lifecycle",description:"Create",source:"@site/docs/lifecycle.md",slug:"/lifecycle",permalink:"/svelte-formula/docs/lifecycle",version:"current",sidebar_label:"Formula Lifecycle",sidebar:"someSidebar",previous:{title:"Formula Options",permalink:"/svelte-formula/docs/options"},next:{title:"Formula Attributes",permalink:"/svelte-formula/docs/attributes"}},c=[{value:"Create",id:"create",children:[]},{value:"Update",id:"update",children:[]},{value:"Reset",id:"reset",children:[]},{value:"Destroy",id:"destroy",children:[]}],u={toc:c};function s(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"create"},"Create"),Object(o.b)("p",null,"To create your form instance call the ",Object(o.b)("inlineCode",{parentName:"p"},"formula()")," method, this creates a ",Object(o.b)("inlineCode",{parentName:"p"},"form")," instance that can be attached to any\nelement with the ",Object(o.b)("a",{parentName:"p",href:"https://svelte.dev/docs#use_action"},"use")," directive."),Object(o.b)("p",null,"When using like this, on component destruction the form will automatically unbind"),Object(o.b)("pre",null,Object(o.b)("code",{parentName:"pre",className:"language-svelte"},"<script>\n  import { formula } from 'svelte-formula';\n\n  const { form } = formula()\n<\/script>\n\n\x3c!-- Use with a form element to get access to submission values --\x3e\n<form use:form></form>\n\n\x3c!-- Use on any other element to create reactive components --\x3e\n<div use:form></div>\n")),Object(o.b)("h2",{id:"update"},"Update"),Object(o.b)("p",null,"Any Formula instance can be updated using the ",Object(o.b)("inlineCode",{parentName:"p"},"updateForm")," method, which accepts a new ",Object(o.b)("inlineCode",{parentName:"p"},"FormulaOptions")," object. When\nusing ",Object(o.b)("inlineCode",{parentName:"p"},"update")," all existing handlers will be removed and rebound."),Object(o.b)("pre",null,Object(o.b)("code",{parentName:"pre",className:"language-svelte"},"<script>\n  import { formula } from 'svelte-formula';\n  import { getMessges } from './libs/lang'\n\n  const { form, updateForm } = formula();\n\n  function switchLanguage(lang) {\n    const messages = getMessges(lang);\n    updateForm({ messages });\n  }\n\n<\/script>\n\n<div class='lang-switcher'>\n  <button on:click={() => switchLanguage('en')}>English</button>\n  <button on:click={() => switchLanguage('nl')}>Nederlands</button>\n  <button on:click={() => switchLanguage('fr')}>Fran\xe7ais</button>\n</div>\n\n<form use:form>\n\n</form>\n")),Object(o.b)("h2",{id:"reset"},"Reset"),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"resetForm")," can be called at any time during the life of the form, it will reset the form to it's initial state after\n",Object(o.b)("inlineCode",{parentName:"p"},"defaultValues")," and element values have been applied, also ",Object(o.b)("inlineCode",{parentName:"p"},"touched")," and ",Object(o.b)("inlineCode",{parentName:"p"},"dirty")," stores are reset."),Object(o.b)("pre",null,Object(o.b)("code",{parentName:"pre",className:"language-svelte"},"<script>\n  import {formula} from 'svelte-formula';\n  const {form, $formValues, initialValues, formReset } = formula();\n\n  $: initialTotal = (initialValues?.value1 || 0) + (initialValues?.value2 || 0)\n  $: total = ($formValues?.value1 || 0) + ($formValues?.value2 || 0)\n});\n<\/script>\n<form use:form>\n  <label for='value-1'>Value 1</label>\n  <input type='number' required id='value-1' name='value1' />\n  <label for='value-2'>Value 2</label>\n  <input type='number' required id='value-2' name='value2' />\n\n  <div>{$initialTotal?.value1} + {$initialTotal?.value2} = {initialTotal}</div>\n  <div>{$formValues?.value1} + {$formValues?.value2} = {total}</div>\n\n  <button on:click!preventDefault={() => formReset}>Reset</button>\n</form>\n")),Object(o.b)("h2",{id:"destroy"},"Destroy"),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"destroyForm")," method allows the form to be destroyed early, which removes all handlers and removes the stores from the\nglobal store."))}s.isMDXComponent=!0},97:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return d}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),s=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},m=function(e){var t=s(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),m=s(n),b=r,d=m["".concat(l,".").concat(b)]||m[b]||p[b]||o;return n?a.a.createElement(d,i(i({ref:t},u),{},{components:n})):a.a.createElement(d,i({ref:t},u))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=b;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var u=2;u<o;u++)l[u]=n[u];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"}}]);