The Most Misleading Part of Angular Forms Validation

Joe Eames
Joe Eames
Oct 8 · 2 min read
Image for post
Image for post

In my free course on the Fundamentals of Angular, there are just over 2 hours of content on template-driven forms in Angular. One of the main parts of this is coverage of how to validate user input. This is an important part of any framework’s forms handling.

But in Angular, there’s a bit of an unmet promise when you learn about forms validation, and this can be confusing, so I’d like to just quickly cover the issue to help clear up any confusion you may encounter when doing forms validation in Angular.

When you first learn about forms validation, you quickly discover that there are several attributes you can add to an input control to validate that control. Angular’s integration with this validation is simple and effective. It’s a bit like magic.

Want to make sure that a field is required? Simply add the “required” attribute to the input element. Angular handles the rest for you. Want to make sure that a password has at least 8 characters? Use the minlength attribute. There’s maxlength as well. And if you really have a tough validation problem, then there’s the pattern attribute which uses regular expressions, and as they say, “now you have two problems” lol.

These attributes are part of the HTML5 spec, so using them is really natural. You’re just leveraging the built-in parts of HTML and Angular is just making them five times more awesome.

So after learning these four attributes you may think “awesome, what other HTML validation attributes are there that I can use? Some quick Googling (or Binging?) will lead you to several more of these same validation attributes. There’s min & max for dates & numbers, there’s step a somewhat more obtuse attribute and of course, there’s the good old type attribute on input elements. Such as type=”email” and then suddenly you discover the unmet tacit promise of Angular validation.

Because these attributes do nothing with Angular validation. Nada. Squat.

At first, you may think that you’re just not doing them right. But that’s not it. They’re not used by Angular. The framework simply doesn’t utilize them. If you want to mimic them, you have to create custom validators yourself.

Now there is logic behind all this but ultimately it doesn’t matter. You just need to know what is and is not supported. So here’s a summary of useful information when doing validation in Angular’s template-driven forms.

Supported Validation Attributes:

  • required
  • pattern
  • minlength
  • maxlength

Unsupported Validation Attributes:

  • type
  • min
  • max
  • step

So don’t get confused if you run into this. It’s just the way it is.

Happy coding!

Signup for my newsletter here.

Visit Us: thinkster.io | Facebook: @gothinkster | Twitter: @GoThinkster

Thinkster.io

Top Quality Tutorials

Joe Eames

Written by

Joe Eames

Mormon, Christian, Father, CEO of Thinkster.io, Organizer of @ngconf, @frameworksummit, React Conf. Front end developer, and Software Craftsmanship Evangelist.

Thinkster.io

Top Quality Tutorials

Joe Eames

Written by

Joe Eames

Mormon, Christian, Father, CEO of Thinkster.io, Organizer of @ngconf, @frameworksummit, React Conf. Front end developer, and Software Craftsmanship Evangelist.

Thinkster.io

Top Quality Tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store