问题描述
有什么方法可以在 Angular 应用程序中禁用 candidosales/material-time-picker 输入字段。用键盘输入时间会破坏一切。
解决方法
如果要阻止键盘输入,则必须使用输入字段的 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>
,
我查看了文档,目前没有一种“方式”可以访问输入属性,禁用或就绪(最适合您的情况)。
但是您可以使用纯 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;
}