Why value is not populated inside the input in mat datepicker?

Question

I have current template:

<input type="text" class="form-control" name="my_date" 
        [matDatepicker]="myDatepicker" #myDate="ngModel"        
        [(ngModel)]="myDateValue" id="my_date" required>                                        
    <mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
    <mat-datepicker #myDatepicker></mat-datepicker>  

The init happen when loading the component:

public myDateValue: string;
    this.myDateValue= myMonth.toString() + "\/" + myDay.toString() + "\/" + myYear.toString(); 

When printing the date to the console I get to see it in the FormControl value. But when the page load the date is not populate into the textbox?

Any idea what I'm doing wrong ? Thanks.

Answer 1

In order to solve this issue I had to change the myDateValue to type Date. That's solved the problem. mat datepicker require the field to be type Date.