Add minLength of 3 to make required work

dnbexperience · Nov 12, 2023 · fb927b6 · fb927b6
1 parent 216c59e
commit fb927b6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -61,6 +61,7 @@ function PhoneNumber(props: Props) {
     disabled,
     width = 'large',
     help,
+    pattern,
     handleFocus,
     handleBlur,
     handleChange,
@@ -189,6 +190,7 @@ function PhoneNumber(props: Props) {
           disabled={disabled}
           width="stretch"
           help={help}
+          minLength={3}
         />
       </Flex.Horizontal>
     </FieldBlock>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx
@@ -1,9 +1,14 @@
-import { Field } from '../../..'
+import { Field, Form } from '../../..'
 
 export default {
   title: 'Eufemia/Forms/PhoneNumber',
 }
 
 export function PhoneNumber() {
-  return <Field.PhoneNumber />
+  return (
+    <Form.Handler onSubmit={console.log}>
+      <Field.PhoneNumber required path="/phoneNumber" />
+      <Form.SubmitButton top />
+    </Form.Handler>
+  )
 }