editor: fix wrong validation for the datepicker component

* Fixes wrong invalid field when the input field is emptied. * Adds `dataType` for the primeng date picker. * Enhances the editor examples. Co-Authored-by: Johnny Mariéthoz <[email protected]>
rero · Jul 24, 2024 · 22ea24c · 22ea24c
1 parent 4be8dd3
commit 22ea24c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/projects/ng-core-tester/src/app/record/editor/schema.json b/projects/ng-core-tester/src/app/record/editor/schema.json
@@ -904,22 +904,40 @@
     },
     "date_time": {
       "title": "Date Time picker",
-      "type": "dateTimePicker",
+      "type": "string",
+      "format": "datetime-local",
+      "pattern": "^[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01]) [012][0-9]:[0-5][0-9]$",
       "widget": {
         "formlyConfig": {
+          "type": "dateTimePicker",
           "props": {
-            "showTime": true
+            "dataType": "string",
+            "styleClass": "w-full",
+            "showTime": true,
+            "validation": {
+              "messages": {
+                "patternMessage": "Should be in the following format: 2022-12-31 13:01 (YYYY-MM-DD hh:mm)."
+              }
+            }
           }
         }
       }
     },
     "date_only": {
       "title": "Date picker",
-      "type": "datepicker",
+      "type": "string",
+      "format": "date",
+      "pattern": "^[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$",
       "widget": {
         "formlyConfig": {
+          "type": "datepicker",
           "props": {
-            "placement": "top"
+            "placement": "top",
+            "validation": {
+              "messages": {
+                "patternMessage": "Should be in the following format: 2022-12-31 (YYYY-MM-DD)."
+              }
+            }
           }
         }
       }

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/date-time-picker-type.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/date-time-picker-type.component.ts
@@ -38,6 +38,7 @@ interface DateTimePickerProps extends FormlyFieldProps {
   maxDate?: Date;
   disabledDates?: Date[];
   disabledDays?: number[];
+  dataType: string;
 }
 
 @Component({
@@ -65,6 +66,7 @@ interface DateTimePickerProps extends FormlyFieldProps {
         [minDate]="props.minDate"
         [maxDate]="props.maxDate"
         [disabledDates]="props.disabledDates"
+        [dataType]="props.dataType"
         [disabledDays]="props.disabledDays"
       ></p-calendar>
     </div>
@@ -86,7 +88,8 @@ export class DateTimepickerTypeComponent extends FieldType<FormlyFieldConfig<Dat
       stepHour: 1,
       stepMinute: 1,
       stepSecond: 1,
-      firstDayOfWeek: 0
+      firstDayOfWeek: 0,
+      dataType: "date"
     },
   };
 

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/datepicker-type.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/datepicker-type.component.ts
@@ -105,9 +105,9 @@ export class DatepickerTypeComponent extends FieldType<FormlyFieldConfig<DatePic
         } catch {
           patchDate = undefined;
         }
-      }
-      if (this.formControl.value !== patchDate) {
-        this.formControl.patchValue(patchDate);
+        if (this.formControl.value !== patchDate) {
+          this.formControl.patchValue(patchDate);
+        }
       }
     });
   }