[Fixed] Datepicker two way binding not working in angular 10

Issue

I’m trying to bind a date from the .ts file but it’s not able to bind.

Here the Woking and not woking code and the question below that

  //Not working
          <mat-label>Date Of Birth</mat-label>
                          <input matInput [matDatepicker]="pickerDOB" [max]="maxAllowedDateOfBirth" placeholder="Date of birth" [(ngModel)]="dateOfBirth">
                          <mat-datepicker-toggle matSuffix [for]="pickerDOB"></mat-datepicker-toggle>
                          <mat-datepicker #pickerDOB [(ngModel)]="dateOfBirth"></mat-datepicker>
             </mat-form-field>
        
         //.ts File
                  dateOfBirth: Date = new Date();
            //in on ngOnInit
                    this.dateOfBirth = new Date(
                            this.child.birthYear,
                            this.child.birthMonth,
                            this.child.birthDay
                          );
        
        //working
             <mat-form-field appearance="fill">
                              <mat-label>Date Of Birth</mat-label>
                              <input matInput [matDatepicker]="pickerDOB" [max]="maxAllowedDateOfBirth" [formControl]="dateOfBirth">
                              <mat-datepicker-toggle matSuffix [for]="pickerDOB"></mat-datepicker-toggle>
                              <mat-datepicker #pickerDOB></mat-datepicker>
                            </mat-form-field>   
 //.ts File      
            dateOfBirth: any;
            
            //in on ngOnInit
             this.dateOfBirth = new FormControl(
                     new Date( 
                      this.child.birthYear,
                      this.child.birthMonth,
                      this.child.birthDay
                    )
                   );

1.Why I need to use a formControl ? is there a way to bind 2 way to a date object.?

2.if I have to use formControl then how can I get the selected date from formcontrol?
Note: no selection changed event just wanted to read when I’m saving the form.
Thanks

Solution

I think, I have a solution for you. Please remove the [(ngModel)]="dateOfBirth" from every single part of

 <mat-datepicker #pickerDOB [(ngModel)]="dateOfBirth"></mat-datepicker>
   </mat-form-field>

ngModel inside input do the binding for you.
So, Here is my code where everything works fine and it is without formControl=>

HTML:

<mat-form-field>
<mat-label>Date Of Birth</mat-label>
          <input matInput [matDatepicker]="pickerDOB" 
                 [max]="maxAllowedDateOfBirth" placeholder="Date of birth" 
                 [(ngModel)]="dateOfBirth" (dateChange)="addEvent('change', $event)">
                          <mat-datepicker-toggle matSuffix [for]="pickerDOB"></mat-datepicker-toggle>
                          <mat-datepicker #pickerDOB></mat-datepicker>
</mat-form-field>

TS:

export class DatepickerEventsExample {
  //events: string[] = [];
  dateOfBirth: Date = new Date();
  maxAllowedDateOfBirth=new Date();
  addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    console.log(this.dateOfBirth);
    this.events.push(`${type}: ${event.value}`);
  }
}

Note: Please check the sample code here => Stackblitz Demo Code.