要验证Angular 7中的响应式表单材料时间输入,您可以使用自定义验证器函数。以下是一个包含代码示例的解决方案:
首先,在您的组件类中,导入必要的模块和函数:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
然后在组件类中定义一个表单组:
export class YourComponent implements OnInit {
timeForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.timeForm = this.formBuilder.group({
time: ['', [Validators.required, this.validateTime]]
});
}
// 自定义验证器函数
validateTime(control: AbstractControl): { [key: string]: any } | null {
const timeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
if (control.value && !timeRegex.test(control.value)) {
return { 'invalidTime': true };
}
return null;
}
// 获取表单控件的便捷方法
get f() { return this.timeForm.controls; }
}
接下来,在您的模板中,使用formControlName
指令来绑定输入框,并显示验证错误消息:
现在,当用户输入无效的时间格式时,表单将显示相应的验证错误消息。
请注意,上述示例仅验证时间的格式,即“HH:mm”。如果您还需要验证时间的有效性,例如限制时间在一天的特定范围内,则需要进一步扩展validateTime
函数。