feat: add range validation to number field

__tests__/e2e/constants/field.ts

@@ -17,6 +17,8 @@ import {
   MyInfoAttribute,
   NricFieldBase,
   NumberFieldBase,
+  NumberSelectedLengthValidation,
+  NumberSelectedValidation,
   RadioFieldBase,
   RatingFieldBase,
   RatingShape,
@@ -246,10 +248,49 @@ export const ALL_FIELDS: E2eFieldMetadata[] = [
     fieldType: BasicField.Number,
     ValidationOptions: {
       selectedValidation: null,
-      customVal: null,
+      LengthValidationOptions: {
+        selectedLengthValidation: null,
+        customVal: null,
+      },
+      RangeValidationOptions: {
+        customMin: null,
+        customMax: null,
+      },
     },
     val: '42',
   },
+  {
+    title: 'Number field character length validation',
+    fieldType: BasicField.Number,
+    ValidationOptions: {
+      selectedValidation: NumberSelectedValidation.Length,
+      LengthValidationOptions: {
+        selectedLengthValidation: NumberSelectedLengthValidation.Exact,
+        customVal: 5,
+      },
+      RangeValidationOptions: {
+        customMin: null,
+        customMax: null,
+      },
+    },
+    val: '12345',
+  },
+  {
+    title: 'Number field range validation',
+    fieldType: BasicField.Number,
+    ValidationOptions: {
+      selectedValidation: NumberSelectedValidation.Range,
+      LengthValidationOptions: {
+        selectedLengthValidation: null,
+        customVal: null,
+      },
+      RangeValidationOptions: {
+        customMin: 2,
+        customMax: 4,
+      },
+    },
+    val: '3',
+  },
   {
     title: 'Mother Tongue Language',
     fieldType: BasicField.Radio,

__tests__/e2e/constants/tests.ts

@@ -93,7 +93,14 @@ const TEST_SUBMISSION_DISABLED_BY_CHAINED_LOGIC_FORMFIELDS: E2eFieldMetadata[] =
       fieldType: BasicField.Number,
       ValidationOptions: {
         selectedValidation: null,
-        customVal: null,
+        LengthValidationOptions: {
+          selectedLengthValidation: null,
+          customVal: null,
+        },
+        RangeValidationOptions: {
+          customMin: null,
+          customMax: null,
+        },
       },
       val: '10',
     },

__tests__/e2e/helpers/createForm.ts

@@ -15,6 +15,7 @@ import {
   LogicConditionState,
   LogicType,
   MyInfoAttribute,
+  NumberSelectedValidation,
 } from 'shared/types'
 
 import { IFormModel, IFormSchema } from 'src/types'
@@ -559,7 +560,6 @@ const addBasicField = async (
       await page.setInputFiles('input[type="file"]', field.path)
       break
     case BasicField.LongText:
-    case BasicField.Number:
     case BasicField.ShortText:
       if (field.ValidationOptions.selectedValidation) {
         // Select from dropdown
@@ -584,6 +584,60 @@ const addBasicField = async (
         await page.getByText('Allow international numbers').click()
       }
       break
+    case BasicField.Number:
+      if (field.ValidationOptions.selectedValidation) {
+        // We need to transform the backend values to frontend input values
+        const selectedValidationInput =
+          field.ValidationOptions.selectedValidation ===
+          NumberSelectedValidation.Length
+            ? 'Number of characters allowed'
+            : 'Range of values allowed'
+
+        await fillDropdown(
+          page,
+          page.getByRole('combobox', { name: 'Field restriction' }),
+          selectedValidationInput,
+        )
+
+        if (
+          field.ValidationOptions.selectedValidation ===
+            NumberSelectedValidation.Length &&
+          field.ValidationOptions.LengthValidationOptions
+            .selectedLengthValidation
+        ) {
+          await fillDropdown(
+            page,
+            page.getByPlaceholder('Length restriction'),
+            field.ValidationOptions.LengthValidationOptions
+              .selectedLengthValidation,
+          )
+
+          if (field.ValidationOptions.LengthValidationOptions.customVal) {
+            await page
+              .getByPlaceholder('Number of characters')
+              .nth(1)
+              .fill(
+                field.ValidationOptions.LengthValidationOptions.customVal.toString(),
+              )
+          }
+        }
+
+        if (
+          field.ValidationOptions.selectedValidation ===
+          NumberSelectedValidation.Range
+        ) {
+          const customMin =
+            field.ValidationOptions.RangeValidationOptions.customMin?.toString() ??
+            ('' as const)
+          const customMax =
+            field.ValidationOptions.RangeValidationOptions.customMax?.toString() ??
+            ('' as const)
+
+          await page.getByPlaceholder('Minimum value').nth(1).fill(customMin)
+          await page.getByPlaceholder('Maximum value').nth(1).fill(customMax)
+        }
+      }
+      break
     case BasicField.Rating:
       await fillDropdown(
         page,

__tests__/unit/backend/helpers/generate-form-data.ts

@@ -20,6 +20,7 @@ import {
   IHomenoFieldSchema,
   IImageFieldSchema,
   IMobileFieldSchema,
+  INumberFieldSchema,
   IRatingFieldSchema,
   IShortTextFieldSchema,
   ITableFieldSchema,
@@ -165,6 +166,23 @@ export const generateDefaultField = (
         getQuestion: () => defaultParams.title,
         ...customParams,
       } as IDateFieldSchema
+    case BasicField.Number:
+      return {
+        ...defaultParams,
+        ValidationOptions: {
+          selectedValidation: null,
+          LengthValidationOptions: {
+            selectedLengthValidation: null,
+            customVal: null,
+          },
+          RangeValidationOptions: {
+            customMin: null,
+            customMax: null,
+          },
+        },
+        getQuestion: () => defaultParams.title,
+        ...customParams,
+      } as INumberFieldSchema
     default:
       return {
         ...defaultParams,

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditNumber/EditNumber.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react'
 import {
   BasicField,
   NumberFieldBase,
+  NumberSelectedLengthValidation,
   NumberSelectedValidation,
 } from '~shared/types'
 
@@ -14,8 +15,15 @@ const DEFAULT_NUMBER_FIELD: NumberFieldBase = {
   title: 'Storybook Number',
   description: 'Some description',
   ValidationOptions: {
-    customVal: null,
     selectedValidation: null,
+    LengthValidationOptions: {
+      selectedLengthValidation: null,
+      customVal: null,
+    },
+    RangeValidationOptions: {
+      customMin: null,
+      customMax: null,
+    },
   },
   required: true,
   disabled: false,
@@ -60,8 +68,15 @@ WithCustomVal.args = {
   field: {
     ...DEFAULT_NUMBER_FIELD,
     ValidationOptions: {
-      customVal: 3,
-      selectedValidation: NumberSelectedValidation.Exact,
+      selectedValidation: NumberSelectedValidation.Length,
+      LengthValidationOptions: {
+        selectedLengthValidation: NumberSelectedLengthValidation.Exact,
+        customVal: 3,
+      },
+      RangeValidationOptions: {
+        customMin: null,
+        customMax: null,
+      },
     },
   },
 }