Datepicker 双向绑定在 angular 10 中不起作用

Question

我正在尝试从 .ts 文件绑定日期，但无法绑定。

这里是 Woking 和 not woking 代码以及下面的问题

  //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 我需要使用 formControl 吗？有没有办法将 2 方式绑定到日期对象？

2.if 我必须使用 formControl 那么如何从 formcontrol 中获取选定的日期？注意：当我保存表单时，没有选择更改事件只是想阅读。谢谢

Answer 1

我想，我有一个解决方案。请从

的每一部分中删除 [(ngModel)]="dateOfBirth"

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

ngModel 在 input 中为您进行绑定。
所以，这是我的代码，一切正常，没有 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}`);
  }
}

注意：请在此处检查示例代码=> Stackblitz Demo Code。

Datepicker 双向绑定在 angular 10 中不起作用

Datepicker two way binding not working in angular 10

typescript

angular

angular10