Angular Material DatePicker with Input validation

Question

I'm using Angular with Angular Material (7.0.2) First I just used a basic Angular Material input with validation pattern. The input field is for a date like (YYYY-MM-DD). The Validation worked fine by entering the date manually. After that I added a Datepicker to the input. So you can enter the date manually or by datepicker. But after that the validation always thinks it's not correct whether the input happens by manually or via datepicker the input field is still red highlighted.

This is the inputfield

     <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>

validate function:

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

what I also noticed when I do:

console.log(this.dateFormControlFrom.value)

I get the date like Fri Nov 16 2018 00:00:00 GMT+0100 not like 2018-11-16 how it actually looks in the input.