);\nconst onlyAlphanumericRegex = (length: number): RegExp =\u003E\n new RegExp(`^[A-Z0-9]{${length}});\n\n\u002F\u002F eslint-disable-next-line @typescript-eslint\u002Fexplicit-function-return-type\nexport const getNameValidationSchema = () =\u003E {\n return Yup.object().shape({\n name1: Yup.string()\n .default(\"\")\n .test(\"required\", \"Name1 is required\", function validator(\n value?: string\n ) {\n \u002F\u002F eslint-disable-next-line functional\u002Fno-this-expression, @typescript-eslint\u002Fno-invalid-this\n const { name2 } = this.parent;\n\n return !name2 || Boolean(value);\n })\n .matches(onlyDigitsRegex(2), {\n excludeEmptyString: true,\n message: \"Name should be 2 digits\"\n }),\n fedContractCode: Yup.string()\n .default(\"\")\n .test(\"required\", \"FED contract code is required\", function validator(\n value?: string\n ) {\n \u002F\u002F eslint-disable-next-line functional\u002Fno-this-expression, @typescript-eslint\u002Fno-invalid-this\n const { name1 } = this.parent;\n\n return !name1 || Boolean(value);\n })\n .matches(onlyAlphanumericRegex(6), {\n excludeEmptyString: true,\n message: \"name2 should be 6 characters\"\n })\n .matches(onlyDigitsRegex(2), {\n excludeEmptyString: true,\n message: \"name2e should be 2 digits\"\n })\n });\n};\n\n\u002F\u002F eslint-disable-next-line @typescript-eslint\u002Fexplicit-function-return-type\nexport const getNameFormValidationSchema = () =\u003E\n Yup.object().shape({\n name: Yup.string().required(),\n nestedArray: Yup.array().of(getNameValidationSchema())\n });\n\n\u002F\u002F eslint-disable-next-line @typescript-eslint\u002Fexplicit-function-return-type\nexport const getTestNameFormValidationSchema = () =\u003E\n Yup.object().shape({\n allName: Yup.array().of(getNameFormValidationSchema())\n });\n\nexport interface NameSchema {\n readonly name1: string | undefined;\n readonly name2: string | undefined;\n}\n\nexport interface AllNameSchema {\n readonly nestedArray: readonly NameSchema[];\n readonly name: string;\n}\n\nexport interface NameFormSchema {\n readonly allName: readonly AllNameSchema[];\n}\n","id":"mod_Vo3eQx1VM199keA3X126P2","is_binary":false,"title":"form-modal.ts","sha":null,"inserted_at":"2021-06-20T16:21:20","updated_at":"2021-06-22T06:32:22","upload_id":null,"shortid":"1QPAj","source_id":"src_5mLgEDjxnKNFJ3qPmT3NKU","directory_shortid":"GXOoy"},{"code":"import React from \"react\";\n\u002F\u002F import { yupResolver } from \"@hookform\u002Fresolvers\u002Fyup\";\nimport { FormProvider, useForm } from \"react-hook-form\";\nimport FieldArray from \".\u002FfieldArray\";\nimport ReactDOM from \"react-dom\";\nimport type { NameFormSchema } from \".\u002Fform-modal\";\nimport \".\u002Fstyles.css\";\n\nconst defaultValues = {\n allName: [\n {\n name: \"useFieldArray1\",\n nestedArray: [\n { name1: \"field1\", name2: \"field2\" },\n { name1: \"field3\", name2: \"field4\" }\n ]\n },\n {\n name: \"useFieldArray2\",\n nestedArray: [{ name1: \"field1\", name2: \"field2\" }]\n }\n ]\n};\n\nfunction App() {\n const form = useForm\u003CNameFormSchema\u003E({\n criteriaMode: \"all\",\n defaultValues: defaultValues,\n mode: \"onChange\",\n reValidateMode: \"onChange\",\n \u002F\u002F resolver: yupResolver(getTestNameFormValidationSchema),\n shouldFocusError: false\n });\n const onSubmit = (data) =\u003E console.log(\"data\", data);\n console.log(defaultValues);\n const {\n control,\n register,\n handleSubmit,\n getValues,\n errors,\n reset,\n setValue,\n watch\n } = form || {};\n\n const formValues = watch();\n console.log(formValues, \"[[[[[\");\n return (\n \u003CFormProvider {...form}\u003E\n \u003Ch1\u003EArray of Array Fields\u003C\u002Fh1\u003E\n \u003Cp\u003E\n The following example demonstrate the ability of building nested array\n fields.\n \u003C\u002Fp\u003E\n\n \u003CFieldArray\n {...{ control, register, defaultValues, getValues, setValue }}\n \u002F\u003E\n\n \u003Cbutton type=\"button\" onClick={() =\u003E reset(defaultValues)}\u003E\n Reset\n \u003C\u002Fbutton\u003E\n\n \u003Cinput type=\"submit\" \u002F\u003E\n \u003C\u002FFormProvider\u003E\n );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\u003CApp \u002F\u003E, rootElement);\n","id":"mod_RrrHEGKtbsR8SiZBa7PwEh","is_binary":false,"title":"index.tsx","sha":null,"inserted_at":"2021-06-20T16:15:14","updated_at":"2021-06-24T08:50:37","upload_id":null,"shortid":"wRo98","source_id":"src_5mLgEDjxnKNFJ3qPmT3NKU","directory_shortid":"GXOoy"},{"code":"import React from \"react\";\nimport { useWatch } from \"react-hook-form\";\nexport const Input = ({ name, control, register }) =\u003E {\n const value = useWatch({\n control,\n name\n });\n return \u003Cinput {...register(name)} defaultValue={value} \u002F\u003E;\n};\n","id":"mod_5Cyakw5cnai87SNMtgJfLL","is_binary":false,"title":"input.tsx","sha":null,"inserted_at":"2021-06-21T12:39:04","updated_at":"2021-06-22T02:28:58","upload_id":null,"shortid":"9yQMP","source_id":"src_5mLgEDjxnKNFJ3qPmT3NKU","directory_shortid":"GXOoy"},{"code":"import React from \"react\";\nimport { useFieldArray } from \"react-hook-form\";\nimport NestedArray from \".\u002FnestedFieldArray\";\nimport type {\n Control,\n UseFormRegister,\n UseFormSetValue,\n UseFormGetValues\n} from \"react-hook-form\";\nimport type { NameFormSchema } from \".\u002Fform-modal\";\nimport { Input } from \".\u002Finput\";\n\nlet renderCount = 0;\n\ninterface Props {\n control: Control\u003CNameFormSchema\u003E;\n register: UseFormRegister\u003CNameFormSchema\u003E;\n setValue: UseFormSetValue\u003CNameFormSchema\u003E;\n getValues: UseFormGetValues\u003CNameFormSchema\u003E;\n}\nconst Fields: React.VFC\u003CProps\u003E = ({\n control,\n register,\n setValue,\n getValues\n}) =\u003E {\n const { fields, append, remove, prepend } = useFieldArray\u003CNameFormSchema\u003E({\n control,\n name: \"allName\"\n });\n\n renderCount++;\n console.log(fields, \"........\");\n return (\n \u003C\u003E\n \u003Cul\u003E\n {fields.map((item, index) =\u003E {\n \u002F\u002F console.log(item, \"======\");\n return (\n \u003Cli key={item.id}\u003E\n \u003CInput\n register={register}\n control={control}\n index={index}\n name={`allName.${index}.name`}\n \u002F\u003E\n {\u002F* \u003Cinput name={`allName.${index}.name`} defaultValue={item.name} \u002F\u003E *\u002F}\n\n \u003Cbutton type=\"button\" onClick={() =\u003E remove(index)}\u003E\n Delete\n \u003C\u002Fbutton\u003E\n \u003CNestedArray nestIndex={index} {...{ control, register }} \u002F\u003E\n \u003C\u002Fli\u003E\n );\n })}\n \u003C\u002Ful\u003E\n\n \u003Csection\u003E\n \u003Cbutton\n type=\"button\"\n onClick={() =\u003E {\n append({ name: \"append\" });\n }}\n \u003E\n append\n \u003C\u002Fbutton\u003E\n\n \u003Cbutton\n type=\"button\"\n onClick={() =\u003E {\n setValue(\"allName\", [\n ...(getValues().allName || []),\n {\n name: \"append\",\n nestedArray: [{ name1: \"append\", name2: \"append\" }]\n }\n ]);\n }}\n \u003E\n Append Nested\n \u003C\u002Fbutton\u003E\n\n \u003Cbutton\n type=\"button\"\n onClick={() =\u003E {\n prepend({ name: \"append\" });\n }}\n \u003E\n prepend\n \u003C\u002Fbutton\u003E\n\n \u003Cbutton\n type=\"button\"\n onClick={() =\u003E {\n setValue(\"allName\", [\n {\n name: \"append\",\n nestedArray: [{ name1: \"Prepend\", name2: \"Prepend\" }]\n },\n ...(getValues().allName || [])\n ]);\n }}\n \u003E\n prepend Nested\n \u003C\u002Fbutton\u003E\n \u003C\u002Fsection\u003E\n\n \u003Cspan className=\"counter\"\u003ERender Count: {renderCount}\u003C\u002Fspan\u003E\n \u003C\u002F\u003E\n );\n};\n\nexport default Fields;\n","id":"mod_5Kp2rAvSbip9oSLcoVqGac","is_binary":false,"title":"fieldArray.tsx","sha":null,"inserted_at":"2021-06-20T16:15:50","updated_at":"2021-06-23T06:02:34","upload_id":null,"shortid":"yzvm7","source_id":"src_5mLgEDjxnKNFJ3qPmT3NKU","directory_shortid":"GXOoy"},{"code":"import React from \"react\";\nimport type { VFC } from \"react\";\nimport { useFieldArray } from \"react-hook-form\";\nimport type { Control, UseFormRegister } from \"react-hook-form\";\nimport type { NameFormSchema } from \".\u002Fform-modal\";\nimport { Input } from \".\u002Finput\";\n\ninterface Props {\n nestIndex: number;\n control: Control\u003CNameFormSchema\u003E;\n register: UseFormRegister\u003CNameFormSchema\u003E;\n}\nconst NestedFieldArray: VFC\u003CProps\u003E = ({ nestIndex, control, register }) =\u003E {\n const { fields, remove, append } = useFieldArray\u003CNameFormSchema\u003E({\n control,\n name: `allName.${nestIndex}.nestedArray` as const\n });\n\n console.log(\"nestedarray:\", fields);\n return (\n \u003Cdiv\u003E\n {fields.map((item, k) =\u003E {\n console.log(item, \"\u002F\u002F\u002F\u002F\u002F\u002F\u002F\u002F\u002F\u002F\u002F\u002F\u002F\u002F\");\n return (\n \u003Cdiv key={item.id} style={{ marginLeft: 20 }}\u003E\n \u003Clabel\u003ENested Array:\u003C\u002Flabel\u003E\n \u003CInput\n register={register}\n control={control}\n name={`allName.${nestIndex}.nestedArray[${k}].name1` as const}\n \u002F\u003E\n \u003CInput\n register={register}\n control={control}\n name={`allName.${nestIndex}.nestedArray[${k}].name2` as const}\n \u002F\u003E\n \u003Cbutton type=\"button\" onClick={() =\u003E remove(k)}\u003E\n Delete Nested\n \u003C\u002Fbutton\u003E\n \u003C\u002Fdiv\u003E\n );\n })}\n\n \u003Cbutton\n type=\"button\"\n onClick={() =\u003E\n append({\n name1: \"field1\",\n name2: \"field2\"\n })\n }\n \u003E\n Append Nested\n \u003C\u002Fbutton\u003E\n\n \u003Chr \u002F\u003E\n \u003C\u002Fdiv\u003E\n );\n};\n\nexport default NestedFieldArray;\n","id":"mod_SvwmYjetxg7yhcQSv9Xdec","is_binary":false,"title":"nestedFieldArray.tsx","sha":null,"inserted_at":"2021-06-20T16:16:37","updated_at":"2021-06-23T06:05:31","upload_id":null,"shortid":"WlLPJ","source_id":"src_5mLgEDjxnKNFJ3qPmT3NKU","directory_shortid":"GXOoy"}],"fork_count":8,"settings":{"ai_consent":null,"use_pint":false},"is_sse":false,"template":"create-react-app","npm_registries":[],"draft":true,"view_count":573,"version":147,"title":null,"privacy":0,"is_frozen":false,"id":"iyqoc","v2":false,"preview_secret":null,"custom_template":null,"sdk":false,"updated_at":"2021-06-24T08:50:37","pr_number":null,"npm_dependencies":{"react":"16.0.0","react-dom":"16.0.0"}};