Angular 15 Material时间选择器设置30分钟间隔的实现方法

1. 利用原生step属性实现基础间隔控制 #

原生HTML <input type="time"> 支持通过step属性设置时间间隔，单位为秒。30分钟对应的秒数是 30*60=1800，直接给matInput添加该属性即可让时间选择器只显示30分钟倍数的选项：

修改后的模板代码：

<mat-form-field appearance="outline">
  <mat-label>{{'DOCTOR_AREA.START_TIME' | translate}}</mat-label>
  <input 
    type="time" 
    matInput  
    min="08:00" 
    max="20:00" 
    id="StartTime" 
    formControlName="StartTime" 
    [(ngModel)]="currentSlot.StartTime"
    step="1800" <!-- 新增30分钟间隔配置 -->
  />
</mat-form-field>

2. 添加自定义验证器防止手动输入非法时间 #

虽然step会限制选择器的选项，但用户仍可手动输入不符合30分钟间隔的时间。你可以给表单控件添加自定义验证器，确保输入值符合规则：

在组件类中添加验证器函数：

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

// 验证时间是否为30分钟的倍数
export function timeIntervalValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.value) return null;
    
    const timeParts = control.value.split(':');
    const minutes = parseInt(timeParts[1], 10);
    
    return minutes % 30 !== 0 ? { invalidTimeInterval: true } : null;
  };
}

然后在表单初始化时绑定验证器：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// 假设你的表单组初始化代码如下
this.yourForm = this.fb.group({
  StartTime: ['', [Validators.required, timeIntervalValidator()]]
});

3. 模板中添加错误提示（可选） #

可以在mat-form-field内添加错误提示，当用户输入非法时间时显示：

<mat-error *ngIf="yourForm.get('StartTime')?.hasError('invalidTimeInterval')">
  请选择30分钟倍数的时间
</mat-error>

内容的提问来源于stack exchange，提问作者Giulia francalancia