<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid">
    <mat-form-field class="adf-date-widget">
        <label class="adf-label" [attr.for]="field.id">{{field.name}} ({{field.dateDisplayFormat}})<span *ngIf="isRequired()">*</span></label>
        <input matInput
               [id]="field.id"
               [matDatepicker]="datePicker"
               [(ngModel)]="displayDate"
               [required]="isRequired()"
               [disabled]="field.readOnly"
               [min]="minDate"
               [max]="maxDate"
               (focusout)="onDateChanged($event.srcElement.value)"
               (dateChange)="onDateChanged($event)"
               placeholder="{{field.placeholder}}">
        <mat-datepicker-toggle  matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
    </mat-form-field>
    <error-widget [error]="field.validationSummary"></error-widget>
    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
    <mat-datepicker #datePicker [touchUi]="true" [startAt]="displayDate" ></mat-datepicker>
</div>

