<mat-form-field [appearance]="fieldAppearance" style="width: 100%">
  <mat-label>Date range</mat-label>
  <mat-date-range-input [formGroup]="dateRange" [rangePicker]="picker">
    <input matStartDate [formControl]="dateRange.controls.from"
           [placeholder]="'From'">
    <input matEndDate [formControl]="dateRange.controls.to"
           [placeholder]="'To'">
  </mat-date-range-input>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <mat-error
    *ngIf="dateRange.controls.from.hasError('matStartDateInvalid')">{{'From date is wrong'}}
  </mat-error>
  <mat-error
    *ngIf="dateRange.controls.to.hasError('matEndDateInvalid')">{{'To date is wrong'}}
  </mat-error>
</mat-form-field>
