エラー表示を他画面とそろえる

dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx

@@ -37,21 +37,15 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
   const closePopup = useCallback(() => {
     onClose();
     dispatch(cleanupWorktype());
-    // エラーをリセット
-    setOptionItemsErrors({
-      hasInvalidOptionItems: false,
-      hasIncorrectPatternOptionItems: false,
-    });
+    setIsPushSaveButton(false);
   }, [onClose, dispatch]);
 
   // 今の入力状態のエラー有無
-  const currentErrors = useSelector(selectHasErrorOptionItems);
-
-  // saveボタンを押したタイミングのエラー有無
-  const [optionItemsErrors, setOptionItemsErrors] = useState<{
-    hasInvalidOptionItems: boolean;
-    hasIncorrectPatternOptionItems: boolean;
-  }>({ hasInvalidOptionItems: false, hasIncorrectPatternOptionItems: false });
+  const { hasIncorrectPatternOptionItems, hasInvalidOptionItems } = useSelector(
+    selectHasErrorOptionItems
+  );
+  // 保存ボタンを押したかどうか
+  const [isPushSaveButton, setIsPushSaveButton] = useState<boolean>(false);
 
   useEffect(() => {
     // optionItems取得
@@ -79,13 +73,8 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
 
   // optionItemsの更新
   const onSubmit = useCallback(async () => {
-    // optionItemsのバリデーションチェック
-    setOptionItemsErrors(currentErrors);
-    const { hasInvalidOptionItems, hasIncorrectPatternOptionItems } =
-      currentErrors;
-
-    // エラーがある場合は実行しない
-    if (hasInvalidOptionItems || hasIncorrectPatternOptionItems) {
+    setIsPushSaveButton(true);
+    if (hasIncorrectPatternOptionItems || hasInvalidOptionItems) {
       return;
     }
 
@@ -94,7 +83,12 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
     if (meta.requestStatus === "fulfilled") {
       closePopup();
     }
-  }, [closePopup, dispatch, currentErrors]);
+  }, [
+    closePopup,
+    dispatch,
+    hasIncorrectPatternOptionItems,
+    hasInvalidOptionItems,
+  ]);
 
   return (
     <div className={`${styles.modal} ${isOpen ? styles.isShow : ""}`}>
@@ -215,7 +209,7 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
                     </tr>
                   ))}
                 </table>
-                {optionItemsErrors.hasInvalidOptionItems && (
+                {isPushSaveButton && hasInvalidOptionItems && (
                   <span className={`${styles.formError} ${styles.alignCenter}`}>
                     {t(
                       getTranslationID(
@@ -224,7 +218,7 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
                     )}
                   </span>
                 )}
-                {optionItemsErrors.hasIncorrectPatternOptionItems && (
+                {isPushSaveButton && hasIncorrectPatternOptionItems && (
                   <span className={`${styles.formError} ${styles.alignCenter}`}>
                     {t(
                       getTranslationID(