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

* fix datepicker validation regression

* improved validation message

* update libs
This commit is contained in:
Denys Vuika
2018-08-14 14:17:44 +01:00
committed by Eugenio Romano
parent 9ac4dba207
commit d39de25fe9
4 changed files with 2962 additions and 2941 deletions

View File

@@ -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)">
{{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
</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 *ngIf="from.invalid">
{{ getFromValidationMessage() | 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)">
{{ 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE' | translate }}
</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 *ngIf="to.invalid">
{{ getToValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
</mat-error>
</mat-form-field>

View File

@@ -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();
}