mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
67e0c02a5a
* [ADF-2984] Show date invalid message on search date range picker * [ADF-2984] test that required format is displayed when date input is invalid * [ADF-2984] More space above buttons
53 lines
2.6 KiB
HTML
53 lines
2.6 KiB
HTML
<form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
|
|
<mat-form-field>
|
|
<input matInput [formControl]="from" [errorStateMatcher]="matcher"
|
|
placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}"
|
|
[matDatepicker]="fromDatepicker"
|
|
[max]="maxDate"
|
|
(focusout)="onChangedHandler($event, from)">
|
|
<mat-datepicker-toggle matSuffix [for]="fromDatepicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #fromDatepicker></mat-datepicker>
|
|
<mat-error *ngIf="from.hasError('required') && !from.hasError('matDatepickerParse')">
|
|
{{ '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="from.hasError('matDatepickerParse')">
|
|
{{ 'SEARCH.FILTER.VALIDATION.INVALID-DATE' | translate: { requiredFormat: datePickerDateFormat } }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field>
|
|
<input matInput [formControl]="to" [errorStateMatcher]="matcher"
|
|
placeholder="{{ 'SEARCH.FILTER.RANGE.TO-DATE' | translate }}"
|
|
[matDatepicker]="toDatepicker"
|
|
[min]="from.value"
|
|
[max]="maxDate"
|
|
(focusout)="onChangedHandler($event, to)">
|
|
<mat-datepicker-toggle matSuffix [for]="toDatepicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #toDatepicker></mat-datepicker>
|
|
<mat-error *ngIf="to.hasError('required') && !to.hasError('matDatepickerParse')">
|
|
{{ '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="to.hasError('matDatepickerParse')">
|
|
{{ 'SEARCH.FILTER.VALIDATION.INVALID-DATE' | translate: { requiredFormat: datePickerDateFormat } }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<div class="facet-buttons facet-buttons--topSpace">
|
|
<button mat-button color="primary" type="button" (click)="reset()">
|
|
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
|
|
</button>
|
|
<button mat-button color="primary" type="submit" [disabled]="!form.valid">
|
|
{{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
|
|
</button>
|
|
</div>
|
|
</form>
|