Set error on number field and prevent form from being submitted (#11637)

<img width="943" alt="Capture d’écran 2025-04-17 à 18 14 46"
src="https://github.com/user-attachments/assets/1208075e-937f-4224-886c-be578264d448"
/>

packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx

@@ -52,6 +52,8 @@ type FormFieldInputProps = {
   VariablePicker?: VariablePickerComponent;
   readonly?: boolean;
   placeholder?: string;
+  error?: string;
+  onError?: (error: string | undefined) => void;
 };
 
 export const FormFieldInput = ({
@@ -61,6 +63,8 @@ export const FormFieldInput = ({
   VariablePicker,
   readonly,
   placeholder,
+  error,
+  onError,
 }: FormFieldInputProps) => {
   return isFieldNumber(field) ? (
     <FormNumberFieldInput
@@ -70,6 +74,8 @@ export const FormFieldInput = ({
       VariablePicker={VariablePicker}
       readonly={readonly}
       placeholder={placeholder}
+      error={error}
+      onError={onError}
     />
   ) : isFieldBoolean(field) ? (
     <FormBooleanFieldInput

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx

@@ -9,6 +9,7 @@ import { InputHint } from '@/ui/input/components/InputHint';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
 import styled from '@emotion/styled';
+import isEmpty from 'lodash.isempty';
 import { useId, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -22,7 +23,6 @@ const StyledInput = styled(TextInput)`
 
 type FormNumberFieldInputProps = {
   label?: string;
-  error?: string;
   defaultValue: number | string | undefined;
   onChange: (value: number | null | string) => void;
   onBlur?: () => void;
@@ -30,20 +30,26 @@ type FormNumberFieldInputProps = {
   hint?: string;
   readonly?: boolean;
   placeholder?: string;
+  error?: string;
+  onError?: (error: string | undefined) => void;
 };
 
 export const FormNumberFieldInput = ({
   label,
-  error,
   placeholder,
   defaultValue,
   onChange,
+  onError,
   onBlur,
   VariablePicker,
   hint,
   readonly,
+  error: errorFromProps,
 }: FormNumberFieldInputProps) => {
   const inputId = useId();
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined,
+  );
 
   const [draftValue, setDraftValue] = useState<
     | {
@@ -68,9 +74,14 @@ export const FormNumberFieldInput = ({
 
   const persistNumber = (newValue: string) => {
     if (!canBeCastAsNumberOrNull(newValue)) {
+      setErrorMessage('Invalid number');
+      onError?.('Invalid number');
       return;
     }
 
+    setErrorMessage(undefined);
+    onError?.(undefined);
+
     const castedValue = castAsNumberOrNull(newValue);
 
     onChange(castedValue);
@@ -115,7 +126,11 @@ export const FormNumberFieldInput = ({
           {draftValue.type === 'static' ? (
             <StyledInput
               inputId={inputId}
-              placeholder={placeholder ?? 'Enter a number'}
+              placeholder={
+                isDefined(placeholder) && !isEmpty(placeholder)
+                  ? placeholder
+                  : 'Enter a number'
+              }
               value={draftValue.value}
               copyButton={false}
               hotkeyScope="record-create"
@@ -139,7 +154,7 @@ export const FormNumberFieldInput = ({
       </FormFieldInputRowContainer>
 
       {hint ? <InputHint>{hint}</InputHint> : null}
-      <InputErrorHelper>{error}</InputErrorHelper>
+      <InputErrorHelper>{errorMessage ?? errorFromProps}</InputErrorHelper>
     </FormFieldInputContainer>
   );
 };

packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormNumberFieldInput.stories.tsx

@@ -70,3 +70,16 @@ export const Disabled: Story = {
     expect(variablePicker).not.toBeInTheDocument();
   },
 };
+
+export const WithError: Story = {
+  args: {
+    error: 'Invalid number',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const error = await canvas.findByText('Invalid number');
+
+    expect(error).toBeVisible();
+  },
+};