add error messages to NumberField examples

vaadin · Sep 23, 2024 · 9b8cf90 · 9b8cf90
1 parent 51252a8
commit 9b8cf90
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 9 deletions.
diff --git a/frontend/demo/component/numberfield/number-field-step.ts b/frontend/demo/component/numberfield/number-field-step.ts
@@ -1,8 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
 
 import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import '@vaadin/number-field';
+import type { NumberField, NumberFieldValidatedEvent } from '@vaadin/number-field';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('number-field-step')
@@ -14,6 +15,9 @@ export class Example extends LitElement {
     return root;
   }
 
+  @state()
+  private errorMessage = '';
+
   protected override render() {
     return html`
       <!-- tag::snippet[] -->
@@ -22,6 +26,17 @@ export class Example extends LitElement {
         step="0.5"
         value="12.5"
         step-buttons-visible
+        .errorMessage="${this.errorMessage}"
+        @validated="${(event: NumberFieldValidatedEvent) => {
+          const field = event.target as NumberField;
+          if ((field.inputElement as HTMLInputElement).validity.badInput) {
+            this.errorMessage = 'Invalid number format';
+          } else if (field.value && Number(field.value) % 0.5 !== 0) {
+            this.errorMessage = 'Duration must be a multiple of 0.5';
+          } else {
+            this.errorMessage = '';
+          }
+        }}"
       ></vaadin-number-field>
       <!-- end::snippet[] -->
     `;

diff --git a/frontend/demo/component/numberfield/number-field-validation.ts b/frontend/demo/component/numberfield/number-field-validation.ts
@@ -1,8 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
 
 import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import '@vaadin/integer-field';
+import type { IntegerField, IntegerFieldValidatedEvent } from '@vaadin/integer-field';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('number-field-validation')
@@ -14,16 +15,35 @@ export class Example extends LitElement {
     return root;
   }
 
+  @state()
+  private errorMessage = '';
+
   protected override render() {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-integer-field
         label="Quantity"
         helper-text="Max 10 items"
-        min="0"
+        required
+        min="1"
         max="10"
         value="2"
         step-buttons-visible
+        .errorMessage="${this.errorMessage}"
+        @validated="${(event: IntegerFieldValidatedEvent) => {
+          const field = event.target as IntegerField;
+          if ((field.inputElement as HTMLInputElement).validity.badInput) {
+            this.errorMessage = 'Invalid number format';
+          } else if (!field.value) {
+            this.errorMessage = 'Field is required';
+          } else if (Number(field.value) < 1) {
+            this.errorMessage = 'Quantity must be at least 1';
+          } else if (Number(field.value) > 10) {
+            this.errorMessage = 'Maximum 10 items available';
+          } else {
+            this.errorMessage = '';
+          }
+        }}"
       ></vaadin-integer-field>
       <!-- end::snippet[] -->
     `;

diff --git a/frontend/demo/component/numberfield/react/number-field-step.tsx b/frontend/demo/component/numberfield/react/number-field-step.tsx
@@ -1,11 +1,36 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { NumberField } from '@vaadin/react-components/NumberField.js';
+import { NumberField, type NumberFieldElement } from '@vaadin/react-components/NumberField.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
 
 function Example() {
+  useSignals(); // hidden-source-line
+  const value = useSignal('12.5');
+  const errorMessage = useSignal('');
+
   return (
     // tag::snippet[]
-    <NumberField label="Duration (hours)" step={0.5} value="12.5" stepButtonsVisible />
+    <NumberField
+      label="Duration (hours)"
+      step={0.5}
+      value={value.value}
+      stepButtonsVisible
+      errorMessage={errorMessage.value}
+      onValueChanged={(event) => {
+        value.value = event.detail.value;
+      }}
+      onValidated={(event) => {
+        const field = event.target as NumberFieldElement;
+        if ((field.inputElement as HTMLInputElement).validity.badInput) {
+          errorMessage.value = 'Invalid number format';
+        } else if (field.value && Number(field.value) % 0.5 !== 0) {
+          errorMessage.value = 'Duration must be a multiple of 0.5';
+        } else {
+          errorMessage.value = '';
+        }
+      }}
+    />
     // end::snippet[]
   );
 }

diff --git a/frontend/demo/component/numberfield/react/number-field-validation.tsx b/frontend/demo/component/numberfield/react/number-field-validation.tsx
@@ -1,17 +1,42 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
-import { IntegerField } from '@vaadin/react-components/IntegerField';
+import { IntegerField, type IntegerFieldElement } from '@vaadin/react-components/IntegerField';
+import { useSignal } from '@vaadin/hilla-react-signals';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
 
 function Example() {
+  useSignals(); // hidden-source-line
+  const value = useSignal('2');
+  const errorMessage = useSignal('');
+
   return (
     // tag::snippet[]
     <IntegerField
       label="Quantity"
       helperText="Max 10 items"
-      min={0}
+      required
+      min={1}
       max={10}
-      value="2"
+      value={value.value}
       stepButtonsVisible
+      errorMessage={errorMessage.value}
+      onValueChanged={(event) => {
+        value.value = event.detail.value;
+      }}
+      onValidated={(event) => {
+        const field = event.target as IntegerFieldElement;
+        if ((field.inputElement as HTMLInputElement).validity.badInput) {
+          errorMessage.value = 'Invalid number format';
+        } else if (!field.value) {
+          errorMessage.value = 'Field is required';
+        } else if (Number(field.value) < 1) {
+          errorMessage.value = 'Quantity must be at least 1';
+        } else if (Number(field.value) > 10) {
+          errorMessage.value = 'Maximum 10 items available';
+        } else {
+          errorMessage.value = '';
+        }
+      }}
     />
     // end::snippet[]
   );

diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldStep.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldStep.java
@@ -2,6 +2,7 @@
 
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.textfield.NumberField;
+import com.vaadin.flow.component.textfield.NumberField.NumberFieldI18n;
 import com.vaadin.flow.router.Route;
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 
@@ -15,6 +16,9 @@ public NumberFieldStep() {
         numberField.setStep(0.5);
         numberField.setValue(12.5);
         numberField.setStepButtonsVisible(true);
+        numberField.setI18n(new NumberFieldI18n()
+            .setBadInputErrorMessage("Invalid number format")
+            .setStepErrorMessage("Duration must be a multiple of 0.5"));
         add(numberField);
         // end::snippet[]
     }

diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValidation.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValidation.java
@@ -2,6 +2,7 @@
 
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.textfield.IntegerField;
+import com.vaadin.flow.component.textfield.IntegerField.IntegerFieldI18n;
 import com.vaadin.flow.router.Route;
 import com.vaadin.demo.DemoExporter; // hidden-source-line
 
@@ -13,10 +14,18 @@ public NumberFieldValidation() {
         IntegerField integerField = new IntegerField();
         integerField.setLabel("Quantity");
         integerField.setHelperText("Max 10 items");
-        integerField.setMin(0);
+        integerField.setRequiredIndicatorVisible(true);
+        integerField.setMin(1);
         integerField.setMax(10);
         integerField.setValue(2);
         integerField.setStepButtonsVisible(true);
+
+        integerField.setI18n(new IntegerFieldI18n()
+            .setRequiredErrorMessage("Field is required")
+            .setBadInputErrorMessage("Invalid number format")
+            .setMinErrorMessage("Quantity must be at least 1")
+            .setMaxErrorMessage("Maximum 10 items available"));
+
         add(integerField);
         // end::snippet[]
     }