AAE-23950 Apply reactive forms for date&time and date widgets

lib/core/src/lib/common/utils/date-fns-adapter.ts

@@ -20,7 +20,7 @@ import { DateFnsUtils } from './date-fns-utils';
 import { Inject, Injectable, Optional } from '@angular/core';
 import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core';
 import { UserPreferenceValues, UserPreferencesService } from '../services/user-preferences.service';
-import { Locale } from 'date-fns';
+import { isValid, Locale, parse } from 'date-fns';
 
 /**
  * Date-fns adapter with moment-to-date-fns conversion.
@@ -47,15 +47,17 @@ import { Locale } from 'date-fns';
  * }
  */
 
+export const DEFAULT_DATE_FORMAT = 'dd-MM-yyyy';
+
 /**
  * Material date formats for Date-fns
  */
 export const ADF_DATE_FORMATS: MatDateFormats = {
     parse: {
-        dateInput: 'dd-MM-yyyy'
+        dateInput: DEFAULT_DATE_FORMAT
     },
     display: {
-        dateInput: 'dd-MM-yyyy',
+        dateInput: DEFAULT_DATE_FORMAT,
         monthLabel: 'LLL',
         monthYearLabel: 'LLL uuuu',
         dateA11yLabel: 'PP',
@@ -88,10 +90,11 @@ export class AdfDateFnsAdapter extends DateFnsAdapter {
     }
 
     override parse(value: any, parseFormat: string | string[]): Date {
+        const dateValue = this.isValid(value) ? value : this.parseAndValidateDate(value);
         const format = Array.isArray(parseFormat)
             ? parseFormat.map(DateFnsUtils.convertMomentToDateFnsFormat)
             : DateFnsUtils.convertMomentToDateFnsFormat(parseFormat);
-        return super.parse(value, format);
+        return super.parse(dateValue, format);
     }
 
     override format(date: Date, displayFormat: string): string {
@@ -103,4 +106,9 @@ export class AdfDateFnsAdapter extends DateFnsAdapter {
 
         return super.format(date, displayFormat);
     }
+
+    private parseAndValidateDate(value: any): Date {
+        const parsedDate = parse(value, this.displayFormat || DEFAULT_DATE_FORMAT, new Date());
+        return isValid(parsedDate) ? parsedDate : value;
+    }
 }

lib/core/src/lib/common/utils/datetime-fns-adapter.ts

@@ -19,7 +19,7 @@ import { Inject, Injectable, Optional } from '@angular/core';
 import { DateFnsUtils } from './date-fns-utils';
 import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimeFormats } from '@mat-datetimepicker/core';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import { Locale, addHours, addMinutes } from 'date-fns';
+import { Locale, addHours, addMinutes, isValid, parse } from 'date-fns';
 
 /**
  * Material date/time formats for Date-fns (mat-datetimepicker)
@@ -126,7 +126,8 @@ export class AdfDateTimeFnsAdapter extends DatetimeAdapter<Date> {
     }
 
     override parse(value: any, parseFormat: any): Date {
-        return this._delegate.parse(value, parseFormat);
+        const dateToParse = isValid(new Date(value)) ? parse(value, this.displayFormat, new Date()) : value;
+        return this._delegate.parse(dateToParse, parseFormat);
     }
 
     override format(date: Date, displayFormat: any): string {

lib/core/src/lib/form/components/form-renderer.component.spec.ts

@@ -110,7 +110,7 @@ describe('Form Renderer Component', () => {
             expectElementToBeHidden(displayTextElementContainer);
 
             inputDateTestOne.value = '2019-11-19';
-            inputDateTestOne.dispatchEvent(new Event('change'));
+            inputDateTestOne.dispatchEvent(new Event('input'));
 
             fixture.detectChanges();
             await fixture.whenStable();
@@ -130,7 +130,7 @@ describe('Form Renderer Component', () => {
             expectElementToBeVisible(displayTextElementContainer);
 
             inputDateTestOne.value = '2019-11-19';
-            inputDateTestOne.dispatchEvent(new Event('change'));
+            inputDateTestOne.dispatchEvent(new Event('input'));
 
             fixture.detectChanges();
             await fixture.whenStable();

lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts

@@ -1552,7 +1552,7 @@ export const formDateVisibility = {
                         2: [
                             {
                                 id: 'Text0pqd1u',
-                                name: 'Text',
+                                name: 'Text equal specific date',
                                 type: 'text',
                                 readOnly: false,
                                 required: false,
@@ -1589,7 +1589,7 @@ export const formDateVisibility = {
                         1: [
                             {
                                 id: 'Text0uyqd3',
-                                name: 'Text',
+                                name: 'Text NOT equal specific date',
                                 type: 'text',
                                 readOnly: false,
                                 required: false,

lib/core/src/lib/form/components/widgets/core/error-message.model.ts

@@ -23,15 +23,15 @@ export class ErrorMessageModel {
 
     constructor(obj?: any) {
         this.message = obj?.message || '';
-        this.attributes = new Map();
+        this.attributes = obj?.attributes || new Map();
     }
 
     isActive(): boolean {
         return !!this.message;
     }
 
     getAttributesAsJsonObj() {
-        let result = {};
+        const result = {};
         if (this.attributes.size > 0) {
             this.attributes.forEach((value, key) => {
                 result[key] = typeof value === 'string' ? value : JSON.stringify(value);

lib/core/src/lib/form/components/widgets/core/form-field-types.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
- /* eslint-disable @angular-eslint/component-selector */
+/* eslint-disable @angular-eslint/component-selector */
 
 export class FormFieldTypes {
     static CONTAINER: string = 'container';
@@ -50,20 +50,13 @@ export class FormFieldTypes {
     static DATA_TABLE: string = 'data-table';
     static DISPLAY_EXTERNAL_PROPERTY: string = 'display-external-property';
 
-    static READONLY_TYPES: string[] = [
-        FormFieldTypes.HYPERLINK,
-        FormFieldTypes.DISPLAY_VALUE,
-        FormFieldTypes.READONLY_TEXT,
-        FormFieldTypes.GROUP
-    ];
+    static READONLY_TYPES: string[] = [FormFieldTypes.HYPERLINK, FormFieldTypes.DISPLAY_VALUE, FormFieldTypes.READONLY_TEXT, FormFieldTypes.GROUP];
 
-    static VALIDATABLE_TYPES: string[] = [
-        FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY
-    ];
+    static VALIDATABLE_TYPES: string[] = [FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY];
 
-    static CONSTANT_VALUE_TYPES: string[] = [
-        FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY
-    ];
+    static REACTIVE_TYPES: string[] = [FormFieldTypes.DATE, FormFieldTypes.DATETIME];
+
+    static CONSTANT_VALUE_TYPES: string[] = [FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY];
 
     static isReadOnlyType(type: string) {
         return FormFieldTypes.READONLY_TYPES.includes(type);
@@ -73,6 +66,10 @@ export class FormFieldTypes {
         return FormFieldTypes.VALIDATABLE_TYPES.includes(type);
     }
 
+    static isReactiveType(type: string): boolean {
+        return FormFieldTypes.REACTIVE_TYPES.includes(type);
+    }
+
     static isConstantValueType(type: string) {
         return FormFieldTypes.CONSTANT_VALUE_TYPES.includes(type);
     }