Angular Material Date Validator 获取无效值

Question

<mat-form-field>
<input matInput [(ngModel)]="myDate" name="myDate" [matDatepicker]="Datepicker"
                        (click)="Datepicker.open()" >
<mat-datepicker-toggle matSuffix [for]="Datepicker"></mat-datepicker-toggle>
<mat-error>Invaild Date</mat-error>
</mat-form-field>
<mat-datepicker #Datepicker></mat-datepicker>

this.form = this.fb.group({
      myDate: [this.dateService.dateValidator]
});


dateValidator(control: FormControl) {
      console.log(control.value) <<<< problem here
}

亲爱的，

我试图在日期字段中输入日期值“1”，但是 dateValidator 中的 control.value 返回 2001-01-01 GMT 00:00。它使 dateValidator 始终通过，即使我在日期字段中填写了“1”。如何从“control.value”中获取原始值“1”而不是自动转换的值？谢谢

Answer 1

之所以会出现这种情况是因为 Material registers an input listener在其 DatePicker 的输入上:

_onInput(value: string) {
  let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);

和parse() 方法does this :

parse(value: any): Date | null {
  if (typeof value == 'number') {
    return new Date(value);
  }

因此，当用户在您的输入中写入 1 时，在后台它变成了 new Date(1)

所以要回答您的问题 - “我如何从“control.value”中获取原始值“1”，您可以同时覆盖 input 和 更改事件:

<input matInput 
       [(ngModel)]="myDate" 
       name="myDate" [matDatepicker]="Datepicker"
       (click)="Datepicker.open()" 
       (input)="someMethod($event.target.value)" 
       (change)="someMethod($event.target.value)">