diff --git a/.changeset/tiny-humans-explode.md b/.changeset/tiny-humans-explode.md new file mode 100644 index 00000000..e1426485 --- /dev/null +++ b/.changeset/tiny-humans-explode.md @@ -0,0 +1,5 @@ +--- +"react-cool-form": patch +--- + +fix(useForm): built-in errors not be cleaned diff --git a/examples/.eslintcache b/examples/.eslintcache deleted file mode 100644 index 0963de08..00000000 --- a/examples/.eslintcache +++ /dev/null @@ -1 +0,0 @@ -[{"/Users/welly/Desktop/react-cool-form/examples/src/index.tsx":"1","/Users/welly/Desktop/react-cool-form/examples/src/App/index.tsx":"2","/Users/welly/Desktop/react-cool-form/examples/src/App/styles.ts":"3","/Users/welly/Desktop/react-cool-form/examples/src/BasicForm/index.tsx":"4","/Users/welly/Desktop/react-cool-form/examples/src/BasicForm/styles.ts":"5","/Users/welly/Desktop/react-cool-form/examples/src/BasicForm/Input.tsx":"6","/Users/welly/Desktop/react-cool-form/examples/src/BasicForm/Controller.tsx":"7","/Users/welly/Desktop/react-cool-form/examples/src/BasicForm/TextArea.tsx":"8","/Users/welly/Desktop/react-cool-form/examples/src/BasicForm/Select.tsx":"9"},{"size":195,"mtime":1606135309914,"results":"10","hashOfConfig":"11"},{"size":310,"mtime":1606135242476,"results":"12","hashOfConfig":"11"},{"size":176,"mtime":1605516112485,"results":"13","hashOfConfig":"11"},{"size":10452,"mtime":1606137281192,"results":"14","hashOfConfig":"11"},{"size":436,"mtime":1605516112488,"results":"15","hashOfConfig":"11"},{"size":501,"mtime":1606135271430,"results":"16","hashOfConfig":"11"},{"size":1343,"mtime":1606135257901,"results":"17","hashOfConfig":"11"},{"size":494,"mtime":1606135279341,"results":"18","hashOfConfig":"11"},{"size":537,"mtime":1606135274771,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"xqrozs",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":14,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"36","usedDeprecatedRules":"22"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/welly/Desktop/react-cool-form/examples/src/index.tsx",[],["41","42","43","44","45","46"],"/Users/welly/Desktop/react-cool-form/examples/src/App/index.tsx",[],"/Users/welly/Desktop/react-cool-form/examples/src/App/styles.ts",[],"/Users/welly/Desktop/react-cool-form/examples/src/BasicForm/index.tsx",["47","48","49","50","51","52","53","54","55","56","57","58","59","60"],"/** @jsxImportSource @emotion/react */\n\nimport { useState, useEffect, useCallback } from \"react\";\nimport { useForm, get, set } from \"react-cool-form\";\nimport * as Yup from \"yup\";\n\nimport Input from \"./Input\";\nimport Controller from \"./Controller\";\nimport Select from \"./Select\";\nimport TextArea from \"./TextArea\";\nimport { container, form, wrapper } from \"./styles\";\n\nconst fib = (n: number): number => (n < 3 ? 1 : fib(n - 2) + fib(n - 1));\n\nexport interface FormValues {\n text?: Record;\n controller1?: any;\n controller2: any;\n dynamicText1?: string;\n dynamicText2: string;\n password: string;\n number: number;\n range: number;\n checkbox: boolean;\n checkboxGroup: string[];\n radio: string;\n image: any;\n select: string;\n multiSelect: Record;\n textarea: string;\n}\n\nconst defaultValues = {\n // text: { nest: \"new test\" },\n controller1: \"new test\",\n controller2: \"new test\",\n // dynamicText1: \"new test\",\n dynamicText2: \"new test\",\n password: \"new test\",\n number: 5,\n range: 0,\n checkbox: true,\n checkboxGroup: [\"value-1\"],\n radio: \"value-1\",\n image: [],\n select: \"value-2\",\n multiSelect: { nest: [\"value-1\", \"value-2\"] },\n textarea: \"test\",\n};\n\nconst schema = Yup.object().shape({\n text: Yup.object()\n .shape({\n nest: Yup.string().required(),\n })\n .required(),\n number: Yup.number().min(100).required(),\n});\n\nexport default (): JSX.Element => {\n const [show1, setShow1] = useState(true);\n const [show2, setShow2] = useState(true);\n const {\n formRef,\n validate,\n getState,\n setValues,\n setFieldValue,\n setErrors,\n setFieldError,\n validateField,\n validateForm,\n controller,\n reset,\n submit,\n } = useForm({\n defaultValues,\n // validateOnChange: false,\n // validateOnBlur: false,\n // iControlFields: [\"text.nest\", \"number\"],\n // excludeFields: [\"text.nest\", \"controller1\", \"controller2\"],\n // validate: async (values) => {\n // let errors: any = { text: { nest: \"\" } };\n\n // // fib(40);\n\n // // eslint-disable-next-line\n // await new Promise((resolve) => {\n // setTimeout(resolve, 3000);\n // });\n\n // // if (text.nest.length <= 3) set(errors, \"text.nest\", \"Form error\");\n // if (values.text.nest.length <= 5) {\n // errors.text.nest = \"Form error\";\n // } else {\n // errors = {};\n // }\n // // if (hiddenText.length <= 3) errors.hiddenText = \"Form error\";\n\n // // throw new Error(\"Fake error\");\n // return errors;\n\n // /* try {\n // await schema.validate(values, { abortEarly: false });\n // } catch (error) {\n // const formErrors = {};\n\n // error.inner.forEach(({ path, message }: any) =>\n // set(formErrors, path, message)\n // );\n\n // return formErrors;\n // } */\n // },\n onReset: (values, options, e) =>\n console.log(\"LOG ===> onReset: \", values, options, e),\n onSubmit: async (values, options, e) => {\n // eslint-disable-next-line\n /* await new Promise((resolve) => {\n setTimeout(resolve, 3000);\n }); */\n\n console.log(\"LOG ===> onSubmit: \", values);\n },\n onError: (errors, options, e) =>\n console.log(\"LOG ===> onError: \", errors, options, e),\n // debug: (formState) => console.log(\"LOG ===> debug: \", formState),\n });\n\n // console.log(\"LOG ===> Re-render\");\n /* console.log(\n \"LOG ===> \",\n getState([\n \"values.controller1\",\n \"errors.controller1\",\n \"dirtyFields.controller1\",\n ])\n ); */\n // console.log(\"LOG ===> \", getState(\"values.dynamicText1\"));\n console.log(\n \"LOG ===> formState: \",\n getState({\n // values: \"values\",\n // errors: \"errors\",\n // touched: \"touched\",\n // isDirty: \"isDirty\",\n // dirtyFields: \"dirtyFields\",\n // isValidating: \"isValidating\",\n // isValid: \"isValid\",\n isSubmitting: \"isSubmitting\",\n isSubmitted: \"isSubmitted\",\n submitCount: \"submitCount\",\n })\n );\n // const [errors, touched] = getState([\"errors\", \"touched\"]);\n\n useEffect(() => {\n // validateField(\"text.nest\");\n // validateForm();\n }, []);\n\n const handleToggle1Click = (): void => setShow1(!show1);\n\n const handleToggle2Click = (): void => setShow2(!show2);\n\n const handleSetValueClick = (): void => {\n /* setValues(\n (prevValues) => ({\n ...prevValues,\n text: { nest: \"new test\" },\n number: 123,\n }),\n {\n touchedFields: [\"text.nest\"],\n dirtyFields: [\"text.nest\"],\n }\n ); */\n\n // setFieldValue(\"text.nest\", (prevValue: string) => `new ${prevValue}`);\n // setFieldValue(\"text.nest\", \"new test\");\n // setFieldValue(\"hiddenText\", \"new test\");\n // setFieldValue(\"password\", \"\");\n // setFieldValue(\"number\", 456);\n // setFieldValue(\"checkbox\", false);\n // setFieldValue(\"checkboxGroup\", [\"value-2\"]);\n // setFieldValue(\"radio\", \"value-2\");\n // setFieldValue(\"multiSelect.nest\", [\"value-2\"]);\n setFieldValue(\"password\", \"12345678\");\n };\n\n const handleSetErrorsClick = (): void => {\n setFieldError(\"number\", \"Error\");\n // setFieldError(\"text.nest\", \"Required\");\n // setFieldError(\"hiddenText\", (prevMsg) => `new ${prevMsg}`);\n };\n\n const handleClearErrorsClick = (): void => {\n setFieldError(\"password\");\n };\n\n const handleValidateClick = (): void => {\n validateField(\"text.nest\");\n };\n\n const handleResetClick = (): void => {\n /* reset((prevValues) => ({ ...prevValues, text: { nest: \"test reset\" } }), [\n \"touched\",\n \"submitCount\",\n ]); */\n\n reset();\n };\n\n const handleSubmit = async () => {\n const res = await submit();\n console.log(\"LOG ===> \", res);\n };\n\n return (\n
\n
\n {show1 && (\n {\n // eslint-disable-next-line\n // await new Promise((resolve) => setTimeout(resolve, 1000));\n return value.length <= 5 ? \"Field error\" : \"\";\n })} */\n required\n // data-icf\n defaultValue=\"test\"\n />\n )}\n {/* {touched.text?.nest && errors.text?.nest &&

{errors.text?.nest}

} */}\n {show2 && (\n {\n return val.length <= 5 ? \"Field error\" : \"\";\n }, */\n })}\n required\n // defaultChecked\n />\n )}\n {\n // eslint-disable-next-line\n // await new Promise((resolve) => setTimeout(resolve, 1000));\n // console.log(\"LOG ===> validate: \", val, values);\n return val.length <= 5 ? \"Field error\" : \"\";\n }, [])} */\n // required\n defaultValue={defaultValues.controller2}\n />\n
\n \n
\n
\n \n
\n \n {/* {touched.password && errors.password &&

{errors.password}

} */}\n \n \n \n
\n \n \n
\n
\n \n \n
\n \n \n \n \n \n \n