feat: Add support of matTimepicker error messages. (#77)

Totati · web-flow · commit 2b41d496e23a · 2024-11-22T18:25:37.000+01:00
DatepickerParseError has been deprecated
diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -68,6 +68,13 @@
           <span *ngxMatErrorDef="let error; for: 'required'; withControl: 'end'">End date is required.</span>
         </mat-error>
       </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Timepicker</mat-label>
+        <input matInput [matTimepicker]="timepicker1" matTimepickerMin="8:30" matTimepickerMax="18:00" [formControl]="time" />
+        <mat-timepicker-toggle matIconSuffix [for]="timepicker1"></mat-timepicker-toggle>
+        <mat-timepicker #timepicker1></mat-timepicker>
+        <mat-error ngx-mat-errors> </mat-error>
+      </mat-form-field>
     </mat-card-content>
   </mat-card>
 
@@ -128,6 +135,13 @@
           <span *ngxMatErrorDef="let error; for: 'required'; withControl: endDateModel">End date is required.</span>
         </mat-error>
       </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Timepicker</mat-label>
+        <input matInput [matTimepicker]="timepicker2" matTimepickerMin="8:30" matTimepickerMax="18:00" [(ngModel)]="value6" />
+        <mat-timepicker-toggle matIconSuffix [for]="timepicker2"></mat-timepicker-toggle>
+        <mat-timepicker #timepicker2></mat-timepicker>
+        <mat-error ngx-mat-errors> </mat-error>
+      </mat-form-field>
     </mat-card-content>
   </mat-card>
 
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -19,6 +19,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
+import { MatTimepickerModule } from '@angular/material/timepicker';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import {
   NgxMatErrorDef,
@@ -48,6 +49,7 @@ import { AsyncMinLengthValidator } from './async-min-length-validator.directive'
     AsyncMinLengthValidator,
     MatDatepickerModule,
     MatNativeDateModule,
+    MatTimepickerModule,
     NgxMatErrorsForDateRangePicker,
   ],
 })
@@ -65,6 +67,7 @@ export class AppComponent {
       (control) => of(Validators.minLength(3)(control)).pipe(delay(250)),
     ],
   });
+  readonly time = new FormControl<Date | null>(new Date('2024-11-22 12:30'));
 
   readonly dateRange = new FormGroup({
     start: new FormControl<Date | null>(null, [Validators.required]),
@@ -78,6 +81,7 @@ export class AppComponent {
   value3: string | null = null;
   value4: Date | null = null;
   value5: Date | null = null;
+  value6: Date | null = null;
 
   readonly outerErrorControl = new FormControl<string | null>(null);
   getControl(
diff --git a/projects/ngx-mat-errors/src/lib/locales/en.ts b/projects/ngx-mat-errors/src/lib/locales/en.ts
@@ -1,19 +1,20 @@
 import { formatDate } from '@angular/common';
 import { type FactoryProvider, LOCALE_ID } from '@angular/core';
 import type {
-  DatepickerParseError,
   EndDateError,
   ErrorMessages,
   LengthError,
   MaxError,
   MinError,
   StartDateError,
+  ParseError,
 } from '../types';
 import { NGX_MAT_ERROR_DEFAULT_OPTIONS } from '../ngx-mat-errors.component';
 
 export function errorMessagesEnFactory(
   locale: string,
-  format = 'shortDate'
+  dateFormat = 'shortDate',
+  timeFormat = 'shortTime'
 ): ErrorMessages {
   return {
     min: (error: MinError) =>
@@ -27,23 +28,36 @@ export function errorMessagesEnFactory(
     maxlength: (error: LengthError) =>
       `Please enter no more than ${error.requiredLength} characters.`,
     matDatepickerMin: (error: MinError<Date>) => {
-      const formatted = formatDate(error.min, format, locale);
+      const formatted = formatDate(error.min, dateFormat, locale);
       return `Please enter a date greater than or equal to ${
         formatted ?? error.min
       }.`;
     },
     matDatepickerMax: (error: MaxError<Date>) => {
-      const formatted = formatDate(error.max, format, locale);
+      const formatted = formatDate(error.max, dateFormat, locale);
       return `Please enter a date less than or equal to ${
         formatted ?? error.max
       }.`;
     },
-    matDatepickerParse: (error: DatepickerParseError) => `Invalid date format.`,
+    matDatepickerParse: (error: ParseError) => `Invalid date format.`,
     matStartDateInvalid: (error: StartDateError<Date>) =>
       `Start date cannot be after end date.`,
     matEndDateInvalid: (error: EndDateError<Date>) =>
       `End date cannot be before start date.`,
     matDatepickerFilter: 'This date is filtered out.',
+    matTimepickerParse: (error: ParseError) => `Invalid time format.`,
+    matTimepickerMin: (error: MinError<Date>) => {
+      const formatted = formatDate(error.min, timeFormat, locale);
+      return `Please enter a time greater than or equal to ${
+        formatted ?? error.min
+      }.`;
+    },
+    matTimepickerMax: (error: MaxError<Date>) => {
+      const formatted = formatDate(error.max, timeFormat, locale);
+      return `Please enter a time less than or equal to ${
+        formatted ?? error.max
+      }.`;
+    },
   };
 }
 
diff --git a/projects/ngx-mat-errors/src/lib/locales/hu.ts b/projects/ngx-mat-errors/src/lib/locales/hu.ts
@@ -1,7 +1,7 @@
 import { formatDate } from '@angular/common';
 import { type FactoryProvider, LOCALE_ID } from '@angular/core';
 import type {
-  DatepickerParseError,
+  ParseError,
   EndDateError,
   ErrorMessages,
   LengthError,
@@ -13,7 +13,8 @@ import { NGX_MAT_ERROR_DEFAULT_OPTIONS } from '../ngx-mat-errors.component';
 
 export function errorMessagesHuFactory(
   locale: string,
-  format = 'shortDate'
+  dateFormat = 'shortDate',
+  timeFormat = 'shortTime'
 ): ErrorMessages {
   return {
     min: (error: MinError) => `Nem lehet kisebb, mint ${error.min}.`,
@@ -26,21 +27,34 @@ export function errorMessagesHuFactory(
       `Legfeljebb ${error.requiredLength} karakter hosszú lehet.`,
     server: (error: string) => error,
     matDatepickerMin: (error: MinError<Date>) => {
-      const formatted = formatDate(error.min, format, locale);
+      const formatted = formatDate(error.min, dateFormat, locale);
       // In Hungarian date ends with '.'
       return `Nem lehet korábbi dátum, mint ${formatted ?? error.min}`;
     },
     matDatepickerMax: (error: MaxError<Date>) => {
-      const formatted = formatDate(error.max, format, locale);
+      const formatted = formatDate(error.max, dateFormat, locale);
       // In Hungarian date ends with '.'
       return `Nem lehet későbbi dátum, mint ${formatted ?? error.max}`;
     },
-    matDatepickerParse: (error: DatepickerParseError) => `Érvénytelen dátum.`,
+    matDatepickerParse: (error: ParseError) => `Érvénytelen dátum.`,
     matStartDateInvalid: (error: StartDateError<Date>) =>
       `A kezdő dátum nem lehet a vég dátum után.`,
     matEndDateInvalid: (error: EndDateError<Date>) =>
-      `A vég dátum nem lehe a kezdő dátum előtt.`,
+      `A vég dátum nem lehet a kezdő dátum előtt.`,
     matDatepickerFilter: 'Ez a dátum nem engedélyezett.',
+    matTimepickerParse: (error: ParseError) => `Érvénytelen idő.`,
+    matTimepickerMin: (error: MinError<Date>) => {
+      const formatted = formatDate(error.min, timeFormat, locale);
+      return `Nem lehet korábbi idő, mint ${
+        formatted ?? error.min
+      }.`;
+    },
+    matTimepickerMax: (error: MaxError<Date>) => {
+      const formatted = formatDate(error.max, timeFormat, locale);
+      return `Nem lehet későbbi idő, mint  ${
+        formatted ?? error.max
+      }.`;
+    },
   };
 }
 
diff --git a/projects/ngx-mat-errors/src/lib/locales/pt-br.ts b/projects/ngx-mat-errors/src/lib/locales/pt-br.ts
@@ -1,7 +1,7 @@
 import { formatDate } from '@angular/common';
 import { type FactoryProvider, LOCALE_ID } from '@angular/core';
 import type {
-  DatepickerParseError,
+  ParseError,
   EndDateError,
   ErrorMessages,
   LengthError,
@@ -13,7 +13,8 @@ import { NGX_MAT_ERROR_DEFAULT_OPTIONS } from '../ngx-mat-errors.component';
 
 export function errorMessagesPtBtFactory(
   locale: string,
-  format = 'shortDate'
+  dateFormat = 'shortDate',
+  timeFormat = 'shortTime'
 ): ErrorMessages {
   return {
     min: (error: MinError) => `Informe um valor igual ou maior a ${error.min}.`,
@@ -25,19 +26,32 @@ export function errorMessagesPtBtFactory(
     maxlength: (error: LengthError) =>
       `O campo não pode ter mais que ${error.requiredLength} caracteres.`,
     matDatepickerMin: (error: MinError<Date>) => {
-      const formatted = formatDate(error.min, format, locale);
+      const formatted = formatDate(error.min, dateFormat, locale);
       return `Informe uma data maior ou igual a ${formatted ?? error.min}.`;
     },
     matDatepickerMax: (error: MaxError<Date>) => {
-      const formatted = formatDate(error.max, format, locale);
+      const formatted = formatDate(error.max, dateFormat, locale);
       return `Informe uma data menor ou igual a ${formatted ?? error.max}.`;
     },
-    matDatepickerParse: (error: DatepickerParseError) => `Invalid date format.`,
+    matDatepickerParse: (error: ParseError) => `Formato de data inválido.`,
     matStartDateInvalid: (error: StartDateError<Date>) =>
-      `Start date cannot be after end date.`,
+      `A data de início não pode ser posterior à data de término.`,
     matEndDateInvalid: (error: EndDateError<Date>) =>
-      `End date cannot be before start date.`,
-    matDatepickerFilter: 'This date is filtered out.',
+      `A data de término não pode ser anterior à data de início.`,
+    matDatepickerFilter: 'Esta data é filtrada.',
+    matTimepickerParse: (error: ParseError) => `Formato de hora inválido.`,
+    matTimepickerMin: (error: MinError<Date>) => {
+      const formatted = formatDate(error.min, timeFormat, locale);
+      return `Insira um horário maior ou igual a ${
+        formatted ?? error.min
+      }.`;
+    },
+    matTimepickerMax: (error: MaxError<Date>) => {
+      const formatted = formatDate(error.max, timeFormat, locale);
+      return `Insira um horário menor ou igual a ${
+        formatted ?? error.max
+      }.`;
+    },
   };
 }
 
diff --git a/projects/ngx-mat-errors/src/lib/types.ts b/projects/ngx-mat-errors/src/lib/types.ts
@@ -83,8 +83,12 @@ export interface EndDateError<D> {
 }
 
 /**
- * For errors: 'matDatepickerParse'
+ * For errors: 'matDatepickerParse', 'matTimepickerParse'
  */
-export interface DatepickerParseError {
+export interface ParseError {
   text: string;
 }
+/**
+ * @deprecated to be removed in version 20. Please use ParseError instead
+ */
+export type DatepickerParseError = ParseError;

Original file line number	Diff line number	Diff line change
`@@ -83,8 +83,12 @@ export interface EndDateError<D> {`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`/**`
`86`		`- * For errors: 'matDatepickerParse'`
	`86`	`+ * For errors: 'matDatepickerParse', 'matTimepickerParse'`
`87`	`87`	`*/`
`88`		`-export interface DatepickerParseError {`
	`88`	`+export interface ParseError {`
`89`	`89`	`text: string;`
`90`	`90`	`}`
	`91`	`+/**`
	`92`	`+ * @deprecated to be removed in version 20. Please use ParseError instead`
	`93`	`+ */`
	`94`	`+export type DatepickerParseError = ParseError;`