Angular7反应式表单材料时间输入验证

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

@Component({
  selector: 'app-time-validation',
  templateUrl: './time-validation.component.html',
  styleUrls: ['./time-validation.component.css']
})
export class TimeValidationComponent {
  timeForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.timeForm = this.formBuilder.group({
      time: ['', [Validators.required, Validators.pattern(/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/)]]
    });
  }

  get time() {
    return this.timeForm.get('time');
  }

  onSubmit() {
    if (this.timeForm.valid) {
      // 执行提交操作
    }
  }
}

<form [formGroup]="timeForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="time">时间：</label>
    <input type="text" id="time" formControlName="time">
    <div *ngIf="time.invalid && (time.dirty || time.touched)">
      <div *ngIf="time.errors.required">时间不能为空</div>
      <div *ngIf="time.errors.pattern">时间格式不正确</div>
    </div>
  </div>
  <button type="submit" [disabled]="timeForm.invalid">提交</button>
</form>