0.1.2 - more info in validation directives, do not touch formcontrol

AnnotationSro · Jan 17, 2021 · 71595eb · 71595eb
1 parent 4e0fe1c
commit 71595eb
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git a/ng-a-date-picker/projects/ng-datepicker-showcase/src/app/app.component.html b/ng-a-date-picker/projects/ng-datepicker-showcase/src/app/app.component.html
@@ -1,13 +1,13 @@
 <h1>Showcase</h1>
 
-<h2>Custom conf in component</h2>
+<h2>Custom conf in component (+ mindate validation</h2>
 <pre>
   currentDateTime1 = new Date();
   ngDateConf2: DirectiveDateConfig =
   {{ngDateConf | json}}
 </pre>
 <input type="text" [(ngModel)]="currentDateTime" [aNgDate]="ngDateConf" #ngm1="ngModel"
-       (change)="log($event)" (ngModelChange)="logM($event)"/>
+       (change)="log($event)" (ngModelChange)="logM($event)"  minDate="2020-01-01T00:00"/>
 
 <br>
 Value 1 = {{currentDateTime}}
@@ -16,7 +16,7 @@ <h2>Custom conf in component</h2>
 dirty = {{ngm1.control.dirty}}<br>
 touched = {{ngm1.control.touched}}<br>
 valid = {{ngm1.control.valid}}<br>
-errors = {{ngm1.control.errors}}<br>
+errors = {{ngm1.control.errors | json}}<br>
 
 <br />
 <hr>

diff --git a/ng-a-date-picker/projects/ng-datepicker-showcase/src/app/app.component.ts b/ng-a-date-picker/projects/ng-datepicker-showcase/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NgDateConfig } from '../../../ng-datepicker/src/lib/date-configurator';
+import { NgDateConfig } from 'ng-datepicker';
 
 @Component({
   selector: 'a-date-app-root',

diff --git a/ng-a-date-picker/projects/ng-datepicker/package.json b/ng-a-date-picker/projects/ng-datepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@annotation/ng-datepicker",
-  "version": "0.1.1-alpha",
+  "version": "0.1.2-alpha",
   "description": "Angular datepicker - work in progress",
   "peerDependencies": {
     "@angular/common": "^11.0.5",

diff --git a/ng-a-date-picker/projects/ng-datepicker/src/lib/directives/ng-date.directive.ts b/ng-a-date-picker/projects/ng-datepicker/src/lib/directives/ng-date.directive.ts
@@ -72,7 +72,6 @@ export class NgDateDirective implements ControlValueAccessor {
 
     this._ngValue = v;
     this.onChange(this._ngValue);
-    this.onTouched();
   }
 
   constructor(

diff --git a/ng-a-date-picker/projects/ng-datepicker/src/lib/directives/validators/validate.conf.ts b/ng-a-date-picker/projects/ng-datepicker/src/lib/directives/validators/validate.conf.ts
@@ -1,32 +1,53 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
+import { formatDate } from '@angular/common';
 import { NgDateConfig } from '../../ng-date.model';
 import { getConverter } from '../../ng-date.util';
 
-export type NgMaxDateError = { maxDate: { rejectedValue: any } } | null;
-export type NgMinDateError = { minDate: { rejectedValue: any } } | null;
+export type NgDateMaxValidationError = {
+  maxDate: { rejectedValue: any; maxDateAllowedFormatted: string; maxDateAllowed: string };
+} | null;
+export type NgDateMinValidationError = {
+  minDate: { rejectedValue: any; minDateAllowedFormatted: string; minDateAllowed: string };
+} | null;
 
 export class NgDateValidators {
   static minDate(minDate: any, ngDateConfig: NgDateConfig): ValidatorFn {
-    function valFn(control: AbstractControl): NgMinDateError {
+    function valFn(control: AbstractControl): NgDateMinValidationError {
       if (!control.value) return null;
 
       const minAsDate = +NgDateValidators.valueToDate(minDate, ngDateConfig);
       const valueAsDate = +NgDateValidators.valueToDate(control.value, ngDateConfig);
 
-      return valueAsDate < minAsDate ? { minDate: { rejectedValue: control.value } } : null;
+      return valueAsDate < minAsDate
+        ? {
+            minDate: {
+              rejectedValue: control.value,
+              minDateAllowed: minDate,
+              minDateAllowedFormatted: NgDateValidators.valueToDisplayFormat(minDate, ngDateConfig),
+            },
+          }
+        : null;
     }
 
     return valFn;
   }
 
   static maxDate(maxDate: any, ngDateConfig: NgDateConfig): ValidatorFn {
-    function valFn(control: AbstractControl): NgMaxDateError {
+    function valFn(control: AbstractControl): NgDateMaxValidationError {
       if (!control.value) return null;
 
       const maxAsDate = +NgDateValidators.valueToDate(maxDate, ngDateConfig);
       const valueAsDate = +NgDateValidators.valueToDate(control.value, ngDateConfig);
 
-      return valueAsDate > maxAsDate ? { maxDate: { rejectedValue: control.value } } : null;
+      return valueAsDate > maxAsDate
+        ? {
+            maxDate: {
+              rejectedValue: control.value,
+              maxDateAllowed: maxDate,
+              maxDateAllowedFormatted: NgDateValidators.valueToDisplayFormat(maxDate, ngDateConfig),
+            },
+          }
+        : null;
     }
 
     return valFn;
@@ -37,4 +58,8 @@ export class NgDateValidators {
 
     return converter.fromModel(value, config);
   }
+
+  private static valueToDisplayFormat(value: any, config: NgDateConfig): string {
+    return formatDate(value, config.displayFormat, config.locale, config.timezone);
+  }
 }