diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditNumber/EditNumber.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditNumber/EditNumber.tsx index 76642a04dc..7bf3831b9e 100644 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditNumber/EditNumber.tsx +++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditNumber/EditNumber.tsx @@ -55,20 +55,20 @@ const transformNumberFieldToEditForm = ( const nextLengthValidationOptions = { selectedLengthValidation: field.ValidationOptions.LengthValidationOptions - ?.selectedLengthValidation || ('' as const), + .selectedLengthValidation || ('' as const), customVal: (!!field.ValidationOptions.LengthValidationOptions - ?.selectedLengthValidation && - field.ValidationOptions.LengthValidationOptions?.customVal) || + .selectedLengthValidation && + field.ValidationOptions.LengthValidationOptions.customVal) || ('' as const), } const nextRangeValidationOptions = { rangeMinimum: - field.ValidationOptions.RangeValidationOptions?.rangeMinimum || + field.ValidationOptions.RangeValidationOptions.rangeMinimum || ('' as const), rangeMaximum: - field.ValidationOptions.RangeValidationOptions?.rangeMaximum || + field.ValidationOptions.RangeValidationOptions.rangeMaximum || ('' as const), } @@ -86,16 +86,18 @@ const transformNumberEditFormToField = ( inputs: EditNumberInputs, originalField: NumberFieldBase, ): NumberFieldBase => { - console.log('inputs') - console.log(inputs) - const nextLengthValidationOptions = + const hasSelectedLengthValidationOption = inputs.ValidationOptions.selectedValidation === - NumberSelectedValidation.Length - ? inputs.ValidationOptions.LengthValidationOptions - : { - selectedLengthValidation: null, - customVal: null, - } + NumberSelectedValidation.Length && + inputs.ValidationOptions.LengthValidationOptions + .selectedLengthValidation !== '' + + const nextLengthValidationOptions = hasSelectedLengthValidationOption + ? inputs.ValidationOptions.LengthValidationOptions + : { + selectedLengthValidation: null, + customVal: null, + } const nextRangeValidationOptions = inputs.ValidationOptions.selectedValidation === @@ -167,10 +169,6 @@ export const EditNumber = ({ field }: EditNumberProps): JSX.Element => { 'Please enter number of characters' ) }, - validNumber: (val) => { - // Check whether input is a valid number, avoid e - return !isNaN(Number(val)) || 'Please enter a valid number' - }, }, min: { value: 1, @@ -184,13 +182,40 @@ export const EditNumber = ({ field }: EditNumberProps): JSX.Element => { [getValues], ) + // We use the rangeMinimum field to perform cross-field validation for + // the number range + const RangeMinimumValidationOptions: RegisterOptions< + EditNumberInputs, + 'ValidationOptions.RangeValidationOptions.rangeMinimum' + > = useMemo( + () => ({ + validate: { + hasValidRange: (val) => { + const numVal = Number(val) + const rangeMaximum = getValues( + 'ValidationOptions.RangeValidationOptions.rangeMaximum', + ) + const numRangeMaximum = Number(rangeMaximum) + return ( + isNaN(numRangeMaximum) || + numVal <= numRangeMaximum || + `Please enter a valid range!` + ) + }, + }, + }), + [getValues], + ) + // Effect to clear validation option errors when selection limit is toggled off. useEffect(() => { - if (!watchedSelectedLengthValidation) { + if (!watchedSelectedValidation) { clearErrors('ValidationOptions') setValue('ValidationOptions.LengthValidationOptions.customVal', '') + setValue('ValidationOptions.RangeValidationOptions.rangeMinimum', '') + setValue('ValidationOptions.RangeValidationOptions.rangeMaximum', '') } - }, [clearErrors, setValue, watchedSelectedLengthValidation]) + }, [clearErrors, setValue, watchedSelectedValidation]) return ( @@ -241,6 +266,7 @@ export const EditNumber = ({ field }: EditNumberProps): JSX.Element => { ( { )} /> + + { + errors?.ValidationOptions?.RangeValidationOptions?.rangeMinimum + ?.message + } + )} {watchedSelectedValidation === NumberSelectedValidation.Length && ( @@ -305,6 +337,10 @@ export const EditNumber = ({ field }: EditNumberProps): JSX.Element => { /> + { + errors?.ValidationOptions?.LengthValidationOptions + ?.selectedLengthValidation?.message + } { errors?.ValidationOptions?.LengthValidationOptions?.customVal ?.message