Introduce signal for easy retrieval of valid state

ls1intum · Nov 6, 2024 · 026a570 · 026a570
1 parent c638460
commit 026a570
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html
@@ -19,8 +19,8 @@
         #dateInput="ngModel"
         class="form-control position-relative ps-5"
         id="date-input-field"
-        [ngClass]="{ 'is-invalid': error() || dateInput.invalid || (requiredField() && !dateInput.value) || warning(), 'border-warning': warning() }"
-        [class.ng-invalid]="error() || dateInput.invalid || (requiredField() && !dateInput.value) || warning()"
+        [ngClass]="{ 'is-invalid': isValid(), 'border-warning': warning() }"
+        [class.ng-invalid]="!isValid()"
         [ngModel]="value"
         [disabled]="disabled()"
         [min]="minDate()"

diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, computed, forwardRef, input, output } from '@angular/core';
+import { Component, Input, ViewChild, computed, forwardRef, input, output, signal } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
 import { faCalendarAlt, faCircleXmark, faClock, faGlobe, faQuestionCircle, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import dayjs from 'dayjs/esm';
@@ -37,13 +37,27 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
     shouldDisplayTimeZoneWarning = input<boolean>(true); // Displays a warning that the current time zone might differ from the participants'.
     valueChange = output<void>();
 
+    protected isInputValid = signal<boolean>(false);
+    protected dateInputValue = signal<string>('');
+
+    isValid = computed(() => {
+        const isInvalid = this.error() || !this.isInputValid() || (this.requiredField() && !this.dateInputValue()) || this.warning();
+        return !isInvalid;
+    });
+
+    private updateSignals(): void {
+        this.isInputValid.set(!Boolean(this.dateInput.invalid));
+        this.dateInputValue.set(this.dateInput.value);
+    }
+
     private onChange?: (val?: dayjs.Dayjs) => void;
 
     /**
      * Emits the value change from component.
      */
     valueChanged() {
         this.valueChange.emit();
+        this.updateSignals();
     }
 
     /**
@@ -57,6 +71,7 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
         } else {
             this.value = value;
         }
+        this.updateSignals();
     }
 
     /**
@@ -117,5 +132,6 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
      */
     clearDate() {
         this.dateInput.reset(undefined);
+        this.updateSignals();
     }
 }