From 704ffafa571275881895065491da94b1bc76d331 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Fri, 25 Aug 2023 18:03:32 +0800 Subject: [PATCH] update useformik and get values by useEffect from formik form --- src/pages/authentication/Register.js | 16 +- .../auth-forms/CustomFormWizard.js | 1608 ++++++++--------- 2 files changed, 812 insertions(+), 812 deletions(-) diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js index fa8e75f..0973a8c 100644 --- a/src/pages/authentication/Register.js +++ b/src/pages/authentication/Register.js @@ -48,12 +48,12 @@ const steps = ['個人資料', '預覽', '完成提交']; const Register = () => { const [activeStep, setActiveStep] = useState(0); const [completed, setCompleted] = useState([false]); - // const [isValid, setisValid] = useState(false); + const [isValid, setisValid] = useState(null); - // const handleIsValidChange = (value) => { - // setisValid(value); - // console.log(value) - // }; + const updateValid = (value) => { + setisValid(value); + console.log(value) + }; const totalSteps = () => { return steps.length; @@ -139,8 +139,8 @@ const Register = () => { ) : ( - {/* */} - + + {/* */} { activeStep === totalSteps() - 1 ? ( @@ -177,7 +177,7 @@ const Register = () => { ): ( - ) diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index f249c57..29d2670 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -1,5 +1,4 @@ -import { useEffect, useState, useRef } from 'react'; -// import { Link as RouterLink } from 'react-router-dom'; +import { useEffect, useState, } from 'react'; // material-ui import { @@ -21,7 +20,7 @@ import {useForm,} from 'react-hook-form' import Autocomplete from "@mui/material/Autocomplete"; // third party -import { Formik } from 'formik'; +import { useFormik,FormikProvider } from 'formik'; import * as Yup from 'yup'; // import axios from "axios"; @@ -38,12 +37,11 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // ============================|| FIREBASE - REGISTER ||============================ // -const CustomFormWizard = (props, ) => { +const CustomFormWizard = (props) => { const [level, setLevel] = useState(); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setshowConfirmPassword] = useState(false); - // const [values, setValues] = useState({}); const handleClickShowPassword = () => { setShowPassword(!showPassword); @@ -75,13 +73,7 @@ const CustomFormWizard = (props, ) => { changePassword(''); }, []); - const formRef = useRef(null); - useEffect(() => { - console.log("formRef changed", formRef.current); - // onIsValidChange(true); - }, [formRef.current]); - - const checkDataField = (data)=>{ + const checkDataField = (data)=> { if (data.username !=="", data.password !=="", data.enName !=="", @@ -95,39 +87,39 @@ const CustomFormWizard = (props, ) => { }; const {handleSubmit,register} = useForm({}) - const _onSubmit = (data) => { - data.idDocType = selectedIdDocType - data.address4 = selectedAddress4 - data.address5 = selectedAddress5 - console.log(data) + const _onSubmit = () => { + values.idDocType = selectedIdDocType + values.address4 = selectedAddress4 + values.address5 = selectedAddress5 + console.log(values) const userAddress = { - "addressLine1":data.address1, - "addressLine2":data.address2, - "addressLine3":data.address4, - "country":data.address5 + "addressLine1":values.address1, + "addressLine2":values.address2, + "addressLine3":values.address4, + "country":values.address5 } const userFaxNo = { - "countryCode":data.faxCountryCode, - "faxNumber":data.fax, + "countryCode":values.faxCountryCode, + "faxNumber":values.fax, } const userMobileNumber = { - "countryCode":data.phoneCountryCode, - "phoneNumber":data.phone, + "countryCode":values.phoneCountryCode, + "phoneNumber":values.phone, } console.log(userAddress) console.log(userFaxNo) console.log(userMobileNumber) - if (checkDataField(data)){ + if (checkDataField(values)){ axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, { - username: data.username, - password: data.password, - name: data.username, - enName: data.enName, - chName: data.chName, - emailAddress: data.email, - idDocType:idDocType, - identification:idNo, - checkDigit:data.checkDigit, + username: values.username, + password: values.password, + name: values.username, + enName: values.enName, + chName: values.chName, + emailAddress: values.email, + idDocType:values.idDocType, + identification:values.idNo, + checkDigit:values.checkDigit, userFaxNo:userFaxNo, userMobileNumber:userMobileNumber, userAddress:userAddress, @@ -143,12 +135,9 @@ const CustomFormWizard = (props, ) => { } } - - return ( - (formRef.current = f)} - initialValues={{ + + const formik = useFormik({ + initialValues:({ username:'', enName: '', chName: '', @@ -159,11 +148,14 @@ const CustomFormWizard = (props, ) => { password: '', confirmPassword: '', phone:'', + phoneCountryCode:'', idNo:'', checkDigit:'', - submit: null - }} - validationSchema={Yup.object().shape({ + submit: null, + fax:'', + faxCountryCode:'', + }), + validationSchema:Yup.object().shape({ username: Yup.string().max(255).required('請輸入用戶名稱'), password: Yup.string().max(255).required('請輸入密碼'), confirmPassword: Yup.string().max(255).required('請確認密碼'), @@ -175,140 +167,290 @@ const CustomFormWizard = (props, ) => { email: Yup.string().email('Must be a valid email').max(255).required('Email is required'), idNo: Yup.string().max(255).required('請輸入證件號碼'), checkDigit:Yup.string().max(1).required('請輸入證件號碼'), - idType: Yup.string().max(255).required('請輸入第三行地址'), - })} - > - {({ errors, handleBlur, handleChange, touched, values, isValid }) => - // console.log(Boolean(touched.password && errors.password)) - // addFieldError(Boolean(touched.password && errors.password)) - ( -
- {/* Input Form */} - - - + idType: Yup.string().max(255).required('請輸入第三行地址') + }), + }); + const { values } = formik + useEffect(() => { + // console.log(values) + }, [values]) + + return ( + + + {/* Input Form */} + + + + +
+ 成為新的個人用戶 +
+ 註有*的項目必須輸入資料 + 你的登入資料 + {/* + Already have an account? + */} + + + + + + + 用戶登入名稱 + * + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.username && formik.errors.username && ( + + {formik.errors.username} + + )} + + + + + + + + 密碼 + * + + 密碼規則 + + { + formik.handleChange(e); + changePassword(e.target.value); + }} + endAdornment={ + + + {showPassword ? : } + + + } + placeholder="密碼" + onBlur={formik.handleBlur} + inputProps={{ + onKeyDown: (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.password && formik.errors.password && ( + + {formik.errors.password} + + )} + + + + + + + + + {level?.label} + + + + + + + + 確認密碼 + * + + { + formik.handleChange(e); + changePassword(e.target.value); + }} + inputProps={{ + onKeyDown: (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + endAdornment={ + + + {showConfirmPassword ? : } + + + } + placeholder="確認密碼" + fullWidth + error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)} + /> + {formik.touched.confirmPassword && formik.errors.confirmPassword && ( + + {formik.errors.confirmPassword} + + )} + + + + + -
- 成為新的個人用戶 -
- 註有*的項目必須輸入資料 - 你的登入資料 + 你的個人資料 {/* - Already have an account? + Already have an account? */} - - - + + - 用戶登入名稱 - * + 身份證明文件 + * - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {touched.username && errors.username && ( - - {errors.username} + {/* {formik.touched.enName && formik.errors.enName && ( + + {formik.errors.enName} - )} + )} */} - - - - - - 密碼 - * - - 密碼規則 - - { - handleChange(e); - changePassword(e.target.value); - }} - endAdornment={ - - - {showPassword ? : } - - + + + + + { + if (newValue !== null){ + setSelectedIdDocType(newValue); } - placeholder="密碼" - onBlur={handleBlur} - inputProps={{ - onKeyDown: (e) => { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {touched.password && errors.password && ( - - {errors.password} - - )} - - - - - - - - - {level?.label} - - + }} + sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} + renderInput={(params) => } + /> + + + {selectedIdDocType =="HKID"? + <> + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.idNo && formik.errors.idNo && ( + + {formik.errors.idNo} + + )} + - - - + + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + fullWidth + error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)} + /> + {formik.touched.checkDigit && formik.errors.checkDigit && ( + + {formik.errors.checkDigit} + + )} + + + : + - 確認密碼 - * - { - handleChange(e); - changePassword(e.target.value); - }} + id="idNo-login" + type="text" + value={formik.values.idNo} + name="idNo" + {...register("idNo")} + onChange={formik.handleChange} + placeholder="證件號碼" + fullWidth + sx={{mr:1}} + error={Boolean(formik.touched.idNo && formik.errors.idNo)} inputProps={{ onKeyDown: (e) => { if (e.key === 'Enter') { @@ -316,703 +458,561 @@ const CustomFormWizard = (props, ) => { } }, }} - endAdornment={ - - - {showConfirmPassword ? : } - - - } - placeholder="確認密碼" - fullWidth - error={Boolean(touched.confirmPassword && errors.confirmPassword)} /> - {touched.confirmPassword && errors.confirmPassword && ( - - {errors.confirmPassword} + {formik.touched.idNo && formik.errors.idNo && ( + + {formik.errors.idNo} )} - - - - - - 你的個人資料 - {/* - Already have an account? - */} - + + } - - - - 身份證明文件 + + + + + 英文姓名 + * + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.enName && formik.errors.enName && ( + + {formik.errors.enName} + + )} + + + + + 中文姓名 + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.chName && formik.errors.chName && ( + + {formik.errors.chName} + + )} + + + + + 地址 + * + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + { + if (newValue !== null){ + setSelectedAddress4(newValue); + } + }} + + sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} + renderInput={(params) => } + /> + { + if (newValue !== null){ + setSelectedAddress5(newValue); + } + }} + + sx={{"& .MuiInputBase-root": { height: "41px" },"#address5-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} + renderInput={(params) => } + /> + {formik.touched.address1 && formik.errors.address1 && ( + + {formik.errors.address1} + + )} + {formik.touched.address2 && formik.errors.address2 && ( + + {formik.errors.address2} + + )} + {formik.touched.address3 && formik.errors.address3 && ( + + {formik.errors.address3} + + )} + + + + + 你的聯絡資料 + + + + + + + 電郵 * - {/* {touched.enName && errors.enName && ( - - {errors.enName} + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + /> + {formik.touched.email && formik.errors.email && ( + + {formik.errors.email} - )} */} + )} - - - - - { - if (newValue !== null){ - setSelectedIdDocType(newValue); + + + 確認電郵 + * + + { + if (e.key === 'Enter') { + e.preventDefault(); } - }} - sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} - renderInput={(params) => } - /> - - - {selectedIdDocType =="HKID"? - <> - - + }, + }} + /> + {formik.touched.emailConfirm && formik.errors.emailConfirm && ( + + {formik.errors.emailConfirm} + + )} + + + + + + + + + + + 聯絡電話 + * + + { if (e.key === 'Enter') { e.preventDefault(); } }, }} + sx={{width:'25%'}} /> - {touched.idNo && errors.idNo && ( - - {errors.idNo} - - )} - - - - { if (e.key === 'Enter') { e.preventDefault(); } }, }} - fullWidth - error={Boolean(touched.checkDigit && errors.checkDigit)} + sx={{width:'75%'}} /> - {touched.checkDigit && errors.checkDigit && ( - - {errors.checkDigit} + {formik.touched.phone && formik.errors.phone && ( + + {formik.errors.phone} )} - - : - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {touched.idNo && errors.idNo && ( - - {errors.idNo} - - )} - } - - - - - - 英文姓名 - * - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {touched.enName && errors.enName && ( - - {errors.enName} - - )} - - - - - 中文姓名 - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {touched.chName && errors.chName && ( - - {errors.chName} - - )} - - - - - 地址 - * - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - { - if (newValue !== null){ - setSelectedAddress4(newValue); - } - }} - - sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} - renderInput={(params) => } - /> - { - if (newValue !== null){ - setSelectedAddress5(newValue); - } - }} - - sx={{"& .MuiInputBase-root": { height: "41px" },"#address5-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} - renderInput={(params) => } - /> - {touched.address1 && errors.address1 && ( - - {errors.address1} - - )} - {touched.address2 && errors.address2 && ( - - {errors.address2} - - )} - {touched.address3 && errors.address3 && ( - - {errors.address3} - - )} - - - - - 你的聯絡資料 - - - - - - - 電郵 - * - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {touched.email && errors.email && ( - - {errors.email} - - )} - - - - 確認電郵 - * - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - /> - {touched.emailConfirm && errors.emailConfirm && ( - - {errors.emailConfirm} - - )} - - - - - - - - - - 聯絡電話 - * - - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - sx={{width:'25%'}} - /> - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - sx={{width:'75%'}} - /> - {touched.phone && errors.phone && ( - - {errors.phone} - - )} - + + + + + 傳真號碼 + + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + sx={{width:'25%'}} + /> + { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + }} + sx={{width:'75%'}} + /> - + - - - - - 傳真號碼 - - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - sx={{width:'25%'}} - /> - { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - }} - sx={{width:'75%'}} - /> - - - - - - - - - 身份證明文件 - 請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。 - 如: 香港身份證; 護照; 中國內地身份證等 - - - 如: 香港身份證; 護照; 中國內地身份證等 - - - - - - {/* - - By Signing up, you agree to our   - - Terms of Service - -   and   - - Privacy Policy - + + + + 身份證明文件 + 請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。 + 如: 香港身份證; 護照; 中國內地身份證等 + + + {/* */} + 如: 香港身份證; 護照; 中國內地身份證等 + + + + {/* */} + + + + {/* + + By Signing up, you agree to our   + + Terms of Service - */} - {errors.submit && ( - - {errors.submit} - - )} +   and   + + Privacy Policy + + + */} + {formik.errors.submit && ( + + {formik.errors.submit} + )} - - {/* Preview Form */} - - - - -
- 成為新的個人用戶 -
- {/* 註有*的項目必須輸入資料 */} - 你的登入資料 + + + {/* Preview Form */} + + + + +
+ 成為新的個人用戶 +
+ {/* 註有*的項目必須輸入資料 */} + 你的登入資料 + {/* + Already have an account? + */} + + + + + + + + 用戶登入名稱: + + + {formik.values.username} + + + + + + 你的個人資料 {/* - Already have an account? + Already have an account? */} - + + + + + + 身份證明文件 + + - - - - - - 用戶登入名稱: - - - {values.username} - - - - - - 你的個人資料 - {/* - Already have an account? - */} - - - - - - 身份證明文件 - - - - - - - 證件類別: - - - {values.idDocType} - - - - - - - 證件號碼: - - - {values.idNo} ({values.checkDigit}) - - - - - - - - 英文姓名: - - - {values.enName} - - - - - - - 中文姓名: - - - {values.chName} - - - - - - - 地址: - - - - {values.address1} - - - {values.address2} - - - {values.address3} - - - {values.address4} - - - {values.address5} - - - - - - - 你的聯絡資料 - - - - - - 電郵: - - - {values.email} + + + + 證件類別: + + + {formik.values.idDocType} + + + + + + + 證件號碼: + + + {formik.values.idNo} ({formik.values.checkDigit}) + + + + + + + + 英文姓名: + + + {formik.values.enName} + + + + + + + 中文姓名: + + + {formik.values.chName} + + + + + + + 地址: + + + + {formik.values.address1} - - - - - - 聯絡電話: + + {formik.values.address2} - - +{values.phoneCountryCode} {values.phone} + + {formik.values.address3} - - - - - - 傳真號碼: + + {formik.values.address4} - - +{values.faxCountryCode} {values.fax} + + {formik.values.address5} - - - - 身份證明文件 - 請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。 - 如: 香港身份證; 護照; 中國內地身份證等 - - - 如: 香港身份證; 護照; 中國內地身份證等 - - - - + + + + + 你的聯絡資料 + + + + + + 電郵: + + + {formik.values.email} + + + + + + + 聯絡電話: + + + +{formik.values.phoneCountryCode} {formik.values.phone} + + + + + + + 傳真號碼: + + + +{formik.values.faxCountryCode} {formik.values.fax} + + + + + + 身份證明文件 + 請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。 + 如: 香港身份證; 護照; 中國內地身份證等 + + + 如: 香港身份證; 護照; 中國內地身份證等 + + + - - - - )} -
+ + + + + ); }