Angular custom validator for hours input in HHH:MM format

Question

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;
 };
}

Where is the regex you are currently using?

R. Richards
– R. Richards

2021-02-09 13:25:17 +00:00
Commented Feb 9, 2021 at 13:25 — R. Richards
– R. Richards, Commented Feb 9, 2021 at 13:25

Dharman · Accepted Answer · 2021-02-09 13:36:25Z

3

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.

edited Feb 9, 2021 at 13:36

Dharman♦

33.9k27 gold badges103 silver badges157 bronze badges

answered Feb 9, 2021 at 13:30

vleonc

2272 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular custom validator for hours input in HHH:MM format

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related