Angular Material: 检查用户是否在未进行任何选择的情况下单击了日期选择器外部

Question

查看用户是否在 Material Angular 日期选择器外部单击的输出事件是什么？

想知道用户点击日期选择器的具体时间，
然后没有做任何新的选择，或者没有重新选择已经输入的日期
点击退出？（因此关闭它）。

关闭流事件不是准确的答案，因为用户可能点击了日期选择。

https://material.angular.io/components/datepicker/api

Answer 1

您可以存储在变量中

waitClose:boolean

然后，您可以使用事件 (dateChange) 将变量设置为 false 和 (opened) 将变量设置为 true。

(closed)="waitClose && close()" 使函数 close() 仅在您单击外部时发生

<mat-form-field>
  <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker" 
                            (dateChange)="waitClose=false" >
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker (closed)="waitClose && close()"
                            (opened)="waitClose=true">
  </mat-datepicker>
</mat-form-field>

见stackblitz

Angular Material: 检查用户是否在未进行任何选择的情况下单击了日期选择器外部

Angular Material: Check if User clicked outside Datepicker without Making Any Selection

datepicker

angular-material

angular

angular8