fix bug

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -43,12 +43,12 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
         enableReinitialize:true,
         initialValues:loadedData,
         validationSchema:yup.object().shape({
-            contactPerson: yup.string().max(40).required('請輸入聯絡人'),
+            contactPerson: yup.string().max(40, "不得超過 40 個字符").required('請輸入聯絡人'),
             tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
             fax_countryCode: yup.string().min(3,'請輸入3位數字'),
             phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
             faxNumber: yup.string().min(8,'請輸入8位數字'),
-            remarks: yup.string().max(255).nullable(),
+            remarks: yup.string().max(255, "不得超過 255 個字符").nullable(),
         }),
         onSubmit:values=>{
             if(!values.issueId){
@@ -212,7 +212,8 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
                                     {FieldUtils.getTextArea({
                                             label:"備註:",
                                             valueName:"remarks",
-                                            form: formik
+                                            form: formik,
+                                            inputProps:{maxLength: 255}
                                     })}
                                 </Grid>
                                 <Grid item xs={12}>

src/utils/FieldUtils.js

@@ -43,7 +43,7 @@ export const getTextField = ({ label, valueName, form, disabled }) => {
     </Grid>;
 }
 
-export const getTextArea = ({ label, valueName, form, disabled, ...props }) => {
+export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...props }) => {
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -59,6 +59,7 @@ export const getTextArea = ({ label, valueName, form, disabled, ...props }) => {
                 row: 10,
                 minRows: 4,
                 maxRows: 4,
+                inputProps: inputProps,
                 props
             })}
         </Grid>