Question

有什么方法可以在 Angular 应用程序中禁用 candidosales/material-time-picker 输入字段。用键盘输入时间会破坏一切。

Answer 1

如果要阻止键盘输入，则必须使用输入字段的 onKeyDown 属性。在那里你只需要写 return false。因此，每次用户尝试输入内容时，它都会被取消。然后，用户只能通过 Material-Date-Picker 选择日期。下面我有一个这样的表单字段的例子，就像我使用它们一样。

<mat-form-field appearance="outline" color="primary">
  <mat-label>Date</mat-label>
  <input
    matInput
    [min]="minDate"
    [matDatepicker]="picker"
    autocomplete="off"
    onKeyDown="return false"
    placeholder="Date"
    formControlName="date"
  />
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
  <mat-error *ngIf="date.invalid"
    >Please select a date</mat-error
  >
</mat-form-field>

Answer 2

我查看了文档，目前没有一种“方式”可以访问输入属性，禁用或就绪（最适合您的情况）。

但是您可以使用纯 JavaScript 来“破解”。可能有更好的方法，但您必须注意，如果您的时间选择器是页面中唯一的选择器，请参见下文：

1 - 第一种情况：屏幕上有多个时间选择器：在 ngAfterViewInit() 方法上（因为它等待 html 和控件加载）

/*This will take every timepicker inputs on page. They all share this #time_Control id
index init with 0, if the timepicker you want is the first. Adjust the index accordingly
*/

ngAfterViewInit(){
    const timepickers: any[] = document.querySelectorAll('#time_Control');
    const index = 0;
    const mytimepicker = timepickers[ index ];
    mytimepicker.disabled = true;
    //or, my personal recomendation => mytimepicker.readonly = true;
}

2 - 第二种情况：屏幕上的一个时间选择器：在 ngAfterViewInit() 方法上（因为它等待 html 和控件加载）

ngAfterViewInit(){
    const mytimepicker: any = document.querySelector('#time_Control');
    mytimepicker.readonly = true;
}

Angular 中的材料时间选择器问题

2 个答案: