I recently encountered a problem in an app I was building that involved some validation on a form in Angular. After a little research and a lot of trial and error. I was able to find a good solution to my problem. It was in ng-pattern that I found this solution. A beautifully simple way to provide validation for inputs on your Angular forms.

Ng-pattern allows a user to validate against a pattern of input that they specify. Yes, just like it sounds, it checks for a pattern. I am not going to go in depth on the ng-pattern because enough people have and it is quite simple to implement. Here are some great resources to read up on this Angular awesomesauce.

http://www.ng-newsletter.com/posts/validations.html

https://docs.angularjs.org/api/ng/directive/input

Here is an example of adding ng-pattern to your HTML:

Now, when it comes time to create that pattern, Regex pops its evil (what I used to think) head in. At first glance, regex can seem like a crazy thing to write. It seems upon first glance that there is absolutely zero readability. This was my first thought as well, but it is actually quite simple.

So in your Angular controller you can set your syntax there to keep your views a bit more clean.

That is literally all it takes. Not bad at all. Now your input is validated based on the inputs pattern.

So my problem was validating the input for a CRON time. This can be a bit complex…or so I thought. If you have ever had an input for CRON time and had to explain to people who do not know CRON syntax how to input the right CRON time, you can understand this. So this is where validation for the pattern can come in handy. My CRON time input accepted: Seconds, Minutes, Hours, Day of Month, Months and Day of Week.

This will help you understand CRON if you are not familiar:

http://crontab.org/

http://en.wikipedia.org/wiki/Cron

There are a ton of great tools out there for helping you along the way when you face a problem as such. Regex is not the scary beast it may appear to be and others have already sharpened the sword to help tackle that beast. Here are some awesome resources to help you along the way.

This cheat sheet is awesome:

http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/

This visualizer is a life saver:

https://www.debuggex.com/?flavor=javascript

The last link provides an awesome visualization map to show you what your regex is actually doing and to help test it. I HIGHLY recommend it.

This is what my map for a CRON syntax regex ended up looking like:

Now I know that a lot this is not the world’s best regex for CRON syntax patterns, but hey, you do better (and then please share it with me :p  ).

Here is an actual snippet of code for validating CRON time syntax:

And BOOM! There you have it! A nice, clean way to provide a regex pattern validation to your Angular forms.

If you have any suggestions, criticisms or recommendations for this post, please post a comment.