Dev ix 2595 display input as valid when the value is empty #2255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

RamVinayMandal wants to merge 44 commits into siemens:main from RamVinayMandal:dev-ix-2595-display-input-as-valid-when-the-value-is-empty

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -200,3 +200,7 @@ packages/documentation/static/ionic-preview @@
     # artifact from bundle @siemens/ix-icons
     ###
     ix-icons/dist/collection/components/icon/icon.css
+    # SonarQube
+    .scannerwork/
+    sonar-project.properties

packages/angular-standalone-test-app/src/app/app.routes.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -1158,6 +1158,11 @@ export const routes: Routes = [ @@
             loadComponent: () =>
               import('../preview-examples/tile').then((m) => m.default),
           },
+          {
+            path: 'time-input-form-test',
+            loadComponent: () =>
+              import('../preview-examples/time-input-form-test').then((m) => m.default),
+          },
           {
             path: 'timepicker',
             loadComponent: () =>
@@ Expand Down @@

packages/angular-standalone-test-app/src/preview-examples/time-input-form-test.ts

Large diffs are not rendered by default.

packages/angular-test-app/src/app/app-routing.module.ts

-Original file line number
+Diff line change
@@ Expand Up @@
     import DateInputReadonly from '../preview-examples/date-input-readonly';
     import DateInputValidation from '../preview-examples/date-input-validation';
     import DateInputWithSlots from '../preview-examples/date-input-with-slots';
+    import DateInputFormTest from '../preview-examples/date-input-form-test';
     import Datepicker from '../preview-examples/datepicker';
     import DatepickerLocale from '../preview-examples/datepicker-locale';
     import DatepickerRange from '../preview-examples/datepicker-range';
@@ Expand Down Expand Up @@
     import TextareaValidation from '../preview-examples/textarea-validation';
     import ThemeService from '../preview-examples/theme-switcher';
     import Tile from '../preview-examples/tile';
+    import TimeInput from '../preview-examples/time-input';
+    import TimeInputDisabled from '../preview-examples/time-input-disabled';
+    import TimeInputFormTest from '../preview-examples/time-input-form-test';
+    import TimeInputLabel from '../preview-examples/time-input-label';
+    import TimeInputReadonly from '../preview-examples/time-input-readonly';
+    import TimeInputValidation from '../preview-examples/time-input-validation';
+    import TimeInputWithSlots from '../preview-examples/time-input-with-slots';
     import Timepicker from '../preview-examples/timepicker';
     import Toast from '../preview-examples/toast';
     import ToastCustom from '../preview-examples/toast-custom';
@@ Expand Down Expand Up / @@ -454,6 +462,10 @@ const routes: Routes = [ @@
             path: 'date-input-with-slots',
             component: DateInputWithSlots,
           },
+          {
+            path: 'date-input-form-test',
+            component: DateInputFormTest,
+          },
           {
             path: 'datepicker',
             component: Datepicker,
@@ Expand Down Expand Up / @@ -797,6 +809,13 @@ const routes: Routes = [ @@
           { path: 'input-with-slots', component: InputWithSlots },
           { path: 'theme-switcher', component: ThemeService },
           { path: 'tile', component: Tile },
+          { path: 'time-input', component: TimeInput },
+          { path: 'time-input-disabled', component: TimeInputDisabled },
+          { path: 'time-input-form-test', component: TimeInputFormTest },
+          { path: 'time-input-label', component: TimeInputLabel },
+          { path: 'time-input-readonly', component: TimeInputReadonly },
+          { path: 'time-input-validation', component: TimeInputValidation },
+          { path: 'time-input-with-slots', component: TimeInputWithSlots },
           { path: 'timepicker', component: Timepicker },
           { path: 'toggle-button-primary', component: ToggleButtonPrimary },
           { path: 'toggle-button-secondary', component: ToggleButtonSecondary },
@@ Expand Down Expand Up / @@ -881,6 +900,13 @@ const routes: Routes = [ @@
             path: 'tile',
             component: Tile,
           },
+          { path: 'time-input', component: TimeInput },
+          { path: 'time-input-disabled', component: TimeInputDisabled },
+          { path: 'time-input-form-test', component: TimeInputFormTest },
+          { path: 'time-input-label', component: TimeInputLabel },
+          { path: 'time-input-readonly', component: TimeInputReadonly },
+          { path: 'time-input-validation', component: TimeInputValidation },
+          { path: 'time-input-with-slots', component: TimeInputWithSlots },
           {
             path: 'timepicker',
             component: Timepicker,
@@ Expand Down @@

packages/angular-test-app/src/app/app.module.ts

-Original file line number
+Diff line change
@@ Expand Up @@
     import DateInputReadonly from '../preview-examples/date-input-readonly';
     import DateInputValidation from '../preview-examples/date-input-validation';
     import DateInputWithSlots from '../preview-examples/date-input-with-slots';
+    import DateInputFormTest from '../preview-examples/date-input-form-test';
     import Datepicker from '../preview-examples/datepicker';
     import DatepickerLocale from '../preview-examples/datepicker-locale';
     import DatepickerRange from '../preview-examples/datepicker-range';
@@ Expand Down Expand Up @@
     import TextareaValidation from '../preview-examples/textarea-validation';
     import ThemeSwitcher from '../preview-examples/theme-switcher';
     import Tile from '../preview-examples/tile';
+    import TimeInput from '../preview-examples/time-input';
+    import TimeInputDisabled from '../preview-examples/time-input-disabled';
+    import TimeInputFormTest from '../preview-examples/time-input-form-test';
+    import TimeInputLabel from '../preview-examples/time-input-label';
+    import TimeInputReadonly from '../preview-examples/time-input-readonly';
+    import TimeInputValidation from '../preview-examples/time-input-validation';
+    import TimeInputWithSlots from '../preview-examples/time-input-with-slots';
     import Timepicker from '../preview-examples/timepicker';
     import Toast from '../preview-examples/toast';
     import ToastCustom from '../preview-examples/toast-custom';
@@ Expand Down Expand Up @@
         DateInputReadonly,
         DateInputValidation,
         DateInputWithSlots,
+        DateInputFormTest,
         ContentExample,
         ContentHeader,
         ContentHeaderNoBack,
@@ Expand Down Expand Up @@
         TextareaLegacy,
         ThemeSwitcher,
         Tile,
+        TimeInput,
+        TimeInputDisabled,
+        TimeInputFormTest,
+        TimeInputLabel,
+        TimeInputReadonly,
+        TimeInputValidation,
+        TimeInputWithSlots,
         Timepicker,
         ToastCustom,
         ToastPosition,
@@ Expand Down @@

packages/angular-test-app/src/preview-examples/date-input-form-test.html

-Original file line number
+Diff line change
@@ -0,0 +1,223 @@
+    <!--
+    SPDX-FileCopyrightText: 2025 Siemens AG
+    SPDX-License-Identifier: MIT
+    This source code is licensed under the MIT license found in the
+    LICENSE file in the root directory of this source tree.
+    -->
+    <div style="padding: 1rem; font-size: 0.9rem">
+      <h2 style="margin-bottom: 0.5rem">Date Input Validation Tests</h2>
+      <div style="margin-bottom: 1rem; padding: 0.75rem; border-radius: 4px">
+        <strong>Testing:</strong> Required field validation (red border) after blur. Format: YYYY-MM-DD
+      </div>
+      <button
+        (click)="clearLogs()"
+        style="padding: 0.5rem 1rem; margin-bottom: 1rem; border: none; border-radius: 4px; cursor: pointer; color: #333">
+        Clear Logs
+      </button>
+      <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem">
+        <!-- Scenario 1: Required (Standalone) -->
+        <div style="border: 2px solid #c62828; border-radius: 8px; padding: 1rem;">
+          <h4 style="margin: 0 0 0.5rem 0; color: #c62828">1️⃣ Required (Standalone)</h4>
+          <ix-date-input
+            #requiredInput
+            name="req1"
+            label="Required Date"
+            [required]="true"
+            (valueChange)="onValueChange($event, '1️⃣')"
+            (focus)="onFocus('1️⃣')"
+            (blur)="onBlur('1️⃣')"
+          ></ix-date-input>
+          <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap">
+            <button
+              type="button"
+              (click)="setEmpty(requiredInput, '1️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #607d8b; color: white">
+              Empty
+            </button>
+            <button
+              type="button"
+              (click)="setValid(requiredInput, '1️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #4caf50; color: white">
+              Valid (Christmas)
+            </button>
+            <button
+              type="button"
+              (click)="setInvalid(requiredInput, '1️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #f44336; color: white">
+              Invalid
+            </button>
+            <button
+              type="button"
+              (click)="triggerManualBlur(requiredInput, '1️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #ff5722; color: white">
+              Manual Blur
+            </button>
+            <button
+              type="button"
+              (click)="clearInput(requiredInput, '1️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #9c27b0; color: white">
+              Clear()
+            </button>
+          </div>
+        </div>
+        <!-- Scenario 2: Optional (Standalone) -->
+        <div style="border: 2px solid #1976d2; border-radius: 8px; padding: 1rem;">
+          <h4 style="margin: 0 0 0.5rem 0; color: #1976d2">2️⃣ Optional (Standalone)</h4>
+          <ix-date-input
+            #optionalInput
+            name="opt1"
+            label="Optional Date"
+            [required]="false"
+            (valueChange)="onValueChange($event, '2️⃣')"
+            (focus)="onFocus('2️⃣')"
+            (blur)="onBlur('2️⃣')"
+          ></ix-date-input>
+          <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap">
+            <button
+              type="button"
+              (click)="setEmpty(optionalInput, '2️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #607d8b; color: white">
+              Empty
+            </button>
+            <button
+              type="button"
+              (click)="setValid(optionalInput, '2️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #4caf50; color: white">
+              Valid (Christmas)
+            </button>
+            <button
+              type="button"
+              (click)="setInvalid(optionalInput, '2️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #f44336; color: white">
+              Invalid
+            </button>
+            <button
+              type="button"
+              (click)="triggerManualBlur(optionalInput, '2️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #ff5722; color: white">
+              Manual Blur
+            </button>
+            <button
+              type="button"
+              (click)="clearInput(optionalInput, '2️⃣')"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #9c27b0; color: white">
+              Clear()
+            </button>
+          </div>
+        </div>
+        <!-- Scenario 3: Form Context (Required) -->
+        <div style="border: 2px solid #388e3c; border-radius: 8px; padding: 1rem;">
+          <h4 style="margin: 0 0 0.5rem 0; color: #388e3c">3️⃣ Form Required</h4>
+          <form [formGroup]="testForm" (ngSubmit)="onFormSubmit($event, '3️⃣')" novalidate>
+            <ix-date-input
+              #formRequiredInput
+              name="form_req"
+              label="Form Required Date"
+              formControlName="requiredDate"
+              (valueChange)="onValueChange($event, '3️⃣')"
+              (focus)="onFocus('3️⃣')"
+              (blur)="onBlur('3️⃣')"
+            ></ix-date-input>
+            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap">
+              <button
+                type="button"
+                (click)="setEmpty(formRequiredInput, '3️⃣')"
+                style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #607d8b; color: white">
+                Empty
+              </button>
+              <button
+                type="button"
+                (click)="setValid(formRequiredInput, '3️⃣')"
+                style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #4caf50; color: white">
+                Valid (Christmas)
+              </button>
+              <button
+                type="button"
+                (click)="setInvalid(formRequiredInput, '3️⃣')"
+                style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #f44336; color: white">
+                Invalid
+              </button>
+              <button
+                type="button"
+                (click)="triggerManualBlur(formRequiredInput, '3️⃣')"
+                style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #ff5722; color: white">
+                Manual Blur
+              </button>
+              <button
+                type="button"
+                (click)="clearInput(formRequiredInput, '3️⃣')"
+                style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #9c27b0; color: white">
+                Clear()
+              </button>
+              <button
+                type="submit"
+                style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #795548; color: white">
+                Submit
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <!-- Date Range Example -->
+      <div style="border: 2px solid #673ab7; border-radius: 8px; padding: 1rem; margin-bottom: 1rem">
+        <h4 style="margin: 0 0 0.5rem 0; color: #673ab7">4️⃣ Date Range</h4>
+        <div style="display: flex; gap: 1rem; align-items: end; flex-wrap: wrap">
+          <div style="flex: 1; min-width: 200px">
+            <ix-date-input
+              #rangeStartInput
+              name="range_start"
+              label="Start Date"
+              (valueChange)="onValueChange($event, '4️⃣ Start')"
+              (focus)="onFocus('4️⃣ Start')"
+              (blur)="onBlur('4️⃣ Start')"
+            ></ix-date-input>
+          </div>
+          <div style="flex: 1; min-width: 200px">
+            <ix-date-input
+              #rangeEndInput
+              name="range_end"
+              label="End Date"
+              (valueChange)="onValueChange($event, '4️⃣ End')"
+              (focus)="onFocus('4️⃣ End')"
+              (blur)="onBlur('4️⃣ End')"
+            ></ix-date-input>
+          </div>
+          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap">
+            <button
+              type="button"
+              (click)="setDateRange()"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #673ab7; color: white">
+              Set 2024 Range
+            </button>
+            <button
+              type="button"
+              (click)="setToday()"
+              style="padding: 0.4rem 0.8rem; font-size: 0.85rem; border: none; border-radius: 4px; cursor: pointer; background-color: #ff9800; color: white">
+              Set Today
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- Event Logs -->
+      <div style="border: 1px solid #ddd; border-radius: 8px; padding: 1rem">
+        <h4 style="margin: 0 0 0.5rem 0; color: #333">📋 Event Logs</h4>
+        <div style="max-height: 300px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0.5rem; background-color: white; font-family: monospace; font-size: 0.85rem">
+          <div *ngIf="logs.length === 0" style="color: #666; font-style: italic">
+            No events yet. Interact with the date inputs above to see logs here.
+          </div>
+          <div *ngFor="let log of logs" [style.color]="getLogColor(log)" style="margin-bottom: 0.25rem">
+            {{ log }}
+          </div>
+        </div>
+      </div>
+    </div>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dev ix 2595 display input as valid when the value is empty #2255

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

SonarQubeCloud / SonarCloud Code Analysis

SonarQubeCloud / SonarCloud Code Analysis

SonarQubeCloud / SonarCloud Code Analysis

SonarQubeCloud / SonarCloud Code Analysis

SonarQubeCloud / SonarCloud Code Analysis

SonarQubeCloud / SonarCloud Code Analysis

SonarQubeCloud / SonarCloud Code Analysis

Uh oh!

Uh oh!