angularvalidationangular-custom-validators

Angular custom validator for hours input in HHH:MM format


I need to validate input in hours and minutes but it is strange format of 6 characters in HHH:MM. For example 30hrs and 15 mins is needed to be entered in the input like 030:15

My attempt to create custom validator is below but I am in need of some help to get the regex to compare the hours entered are between 0-70 and minutes to be in 00-59.

import { AbstractControl, ValidatorFn, FormControl } from '@angular/forms';
export class RegexConstants {
  public static DECIMAL_6_4 = /^[0-9:-]{6}$/;
}
export function hoursClaimedValidator(input: string,reg: RegexConstants){     

    return (control: AbstractControl):{[key: string]: boolean} | null => {

    if( control.value !==null && (isNaN(control.value) || control.value.toString().match(reg))) 
    {
       return {'hoursClaimed': true}
    }
    return null;
 };
}

Solution

  • So, if you need a regex to work with your needed input, you could try this one:

    hhhmm = new RegExp(/^0([0-6][0-9]|70):[0-5][0-9]$/);
    

    With the first caret you force the user to start with a 0. Then you make an or statement where you let the user choose between 00 to 69 combination or a 70. After this, a colon (:) is needed. Finally, the string must finish with a number between 00 and 59.