Angular Material DatePicker с проверкой ввода

Я использую Angular с Angular Material (7.0.2) Сначала я просто использовал базовый ввод Angular Material с шаблоном проверки. Поле ввода предназначено для даты типа (ГГГГ-ММ-ДД). Проверка работала нормально, ввод даты вручную. После этого я добавил на вход Datepicker. Таким образом, вы можете ввести дату вручную или с помощью datepicker. Но после этого проверка всегда считает неправильным, происходит ли ввод вручную или через datepicker, поле ввода по-прежнему выделяется красным цветом.

Это поле ввода

     <mat-form-field class = "input-date">
        <input id = "search-form-field-input-date-from" matInput #date
               [formControl] = "dateFormControlFrom" required placeholder = "Date (YYYY-MM-DD)"
               [matDatepicker] = "datePickerFrom"
               pattern = "^(?:\d{4}-(?:(?:(?:(?:0[13578]|1[02])-(?:0[1-9]|[1-2][0-9]|3[01]))|(?:(?:0[469]|11)-(?:0[1-9]|[1-2][0-9]|30))|(?:02-(?:0[1-9]|1[0-9]|2[0-8]))))|(?:(?:\d{2}(?:0[48]|[2468][048]|[13579][26]))|(?:(?:[02468][048])|[13579][26])00)-02-29)$"
        >
        <mat-datepicker-toggle matSuffix [for] = "datePickerFrom"></mat-datepicker-toggle>
        <mat-datepicker #datePickerFrom></mat-datepicker>
      </mat-form-field>

функция проверки:

private validateFormInput(): boolean {
    return this.dateFormControlFrom.valid;
}

что я также заметил, когда делаю:

console.info(this.dateFormControlFrom.value)

Я получаю дату как Fri Nov 16 2018 00:00:00 GMT+0100, а не как 2018-11-16, как она выглядит на входе.