[ADF-3459] fix datepicker validation regression (#3697)

* fix datepicker validation regression

* improved validation message

* update libs

lib/content-services/search/components/search-date-range/search-date-range.component.html

@@ -10,14 +10,8 @@
                 (focusout)="onChangedHandler($event, from)">
         <mat-datepicker-toggle matSuffix [for]="fromDatepicker"></mat-datepicker-toggle>
         <mat-datepicker #fromDatepicker></mat-datepicker>
-        <mat-error *ngIf="from.hasError('required') && !hasParseError(from)">
+        <mat-error *ngIf="from.invalid">
-            {{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
+            {{ getFromValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
-        </mat-error>
-        <mat-error *ngIf="from.hasError('matDatepickerMax')">
-            {{ 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE' | translate }}
-        </mat-error>
-        <mat-error *ngIf="hasParseError(from)">
-            {{ 'SEARCH.FILTER.VALIDATION.INVALID-DATE' | translate: { requiredFormat: datePickerDateFormat } }}
         </mat-error>
     </mat-form-field>
 
@@ -33,17 +27,8 @@
                 (focusout)="onChangedHandler($event, to)">
         <mat-datepicker-toggle matSuffix [for]="toDatepicker"></mat-datepicker-toggle>
         <mat-datepicker #toDatepicker></mat-datepicker>
-        <mat-error *ngIf="to.hasError('required') && !hasParseError(to)">
+        <mat-error *ngIf="to.invalid">
-                {{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
+            {{ getToValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
-        </mat-error>
-        <mat-error *ngIf="to.hasError('matDatepickerMin')">
-                {{ 'SEARCH.FILTER.VALIDATION.NO-DAYS' | translate }}
-        </mat-error>
-        <mat-error *ngIf="to.hasError('matDatepickerMax')">
-            {{ 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE' | translate }}
-        </mat-error>
-        <mat-error *ngIf="hasParseError(to)">
-            {{ 'SEARCH.FILTER.VALIDATION.INVALID-DATE' | translate: { requiredFormat: datePickerDateFormat } }}
         </mat-error>
     </mat-form-field>
 

lib/content-services/search/components/search-date-range/search-date-range.component.ts

@@ -60,6 +60,21 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
                 private userPreferencesService: UserPreferencesService) {
     }
 
+    getFromValidationMessage(): string {
+        return this.from.hasError('matDatepickerParse') ? 'SEARCH.FILTER.VALIDATION.INVALID-DATE' :
+            this.from.hasError('matDatepickerMax') ? 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE' :
+            this.from.hasError('required') ? 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' :
+            '';
+    }
+
+    getToValidationMessage(): string {
+        return this.to.hasError('matDatepickerParse') ? 'SEARCH.FILTER.VALIDATION.INVALID-DATE' :
+            this.to.hasError('matDatepickerMin') ? 'SEARCH.FILTER.VALIDATION.NO-DAYS' :
+            this.to.hasError('matDatepickerMax') ? 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE' :
+            this.to.hasError('required') ? 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' :
+            '';
+    }
+
     ngOnInit() {
         if (this.settings) {
             this.datePickerDateFormat = this.settings.dateFormat || DEFAULT_FORMAT_DATE;
@@ -107,13 +122,17 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
         }
     }
 
-    onChangedHandler(event: any, formControl) {
+    onChangedHandler(event: any, formControl: FormControl) {
         const inputValue = event.srcElement.value;
 
         if (inputValue) {
             const formatDate = this.dateAdapter.parse(inputValue, this.datePickerDateFormat);
             if (formatDate && formatDate.isValid()) {
                 formControl.setValue(formatDate);
+            } else {
+                formControl.setErrors({
+                    'matDatepickerParse': true
+                });
             }
         }
     }
@@ -123,10 +142,6 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
         moment.locale(locale);
     }
 
-    hasParseError(formControl) {
-        return formControl.hasError('matDatepickerParse') && formControl.getError('matDatepickerParse').text;
-    }
-
     forcePlaceholder(event: any) {
         event.srcElement.click();
     }

package.json

@@ -59,19 +59,19 @@
     "@alfresco/adf-insights": "2.5.0-e54f9bc5fe08d3963ae86dac9aa60fbdf0bf2a41",
     "@alfresco/adf-process-services": "2.5.0-e54f9bc5fe08d3963ae86dac9aa60fbdf0bf2a41",
     "@angular-devkit/build-ng-packagr": "^0.7.1",
-    "@angular/animations": "6.1.0",
+    "@angular/animations": "6.1.2",
-    "@angular/cdk": "6.4.2",
+    "@angular/cdk": "6.4.5",
-    "@angular/common": "6.1.0",
+    "@angular/common": "6.1.2",
-    "@angular/compiler": "6.1.0",
+    "@angular/compiler": "6.1.2",
-    "@angular/core": "6.1.0",
+    "@angular/core": "6.1.2",
     "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.1.0",
+    "@angular/forms": "6.1.2",
-    "@angular/http": "6.1.0",
+    "@angular/http": "6.1.2",
-    "@angular/material": "6.4.2",
+    "@angular/material": "6.4.5",
-    "@angular/material-moment-adapter": "6.4.2",
+    "@angular/material-moment-adapter": "6.4.5",
-    "@angular/platform-browser": "6.1.0",
+    "@angular/platform-browser": "6.1.2",
-    "@angular/platform-browser-dynamic": "6.1.0",
+    "@angular/platform-browser-dynamic": "6.1.2",
-    "@angular/router": "6.1.0",
+    "@angular/router": "6.1.2",
     "@mat-datetimepicker/core": "2.0.1-beta.1",
     "@mat-datetimepicker/moment": "2.0.1-beta.1",
     "@ngx-translate/core": "10.0.2",
@@ -103,8 +103,8 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.7.2",
-    "@angular/cli": "^6.2.0-beta.0",
+    "@angular/cli": "^6.1.3",
-    "@angular/compiler-cli": "6.1.0",
+    "@angular/compiler-cli": "6.1.2",
     "@types/hammerjs": "2.0.35",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
@@ -160,10 +160,10 @@
     "systemjs-builder": "0.15.34",
     "traceur": "0.0.111",
     "ts-node": "~4.1.0",
-    "tsickle": "^0.26.0",
+    "tsickle": "^0.32.1",
     "tslint": "5.9.1",
     "typedoc": "^0.11.1",
-    "typescript": "2.8.4",
+    "typescript": "2.9.2",
     "url-join": "^4.0.0",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-cli": "^3.1.0",