A simple approach to displaying form validation messages in Angular

In this video, we take a look at how to display form validation error messages to the user in a way that is simple to implement, doesn't rely on any 3rd party dependencies, and doesn't compromise on UX.

We also walk through how the FormGroupDirective is used by Angular to hook into the standard form DOM element.

0:00 Introduction
0:44 How the validations should work
2:02 The form validators
2:37 Update on blur
3:10 Showing validation messages
6:45 Handling the custom validator
7:49 Conclusion

#ionic #angular

[baluditor]

I love the fact that you expleind in detail what that #form="ngFrom" means. Thanks for that.

[CraigShearer]

Thanks Josh - the deep dive into FormGroupDirective (at 4:40) is really interesting and intriguing to see how it works under the hood. Seeing how events are wired up in host blew my mind :)

[magmarrex]

This channel is pure gold. I love how you touch the backside details.

[Rollout]

Great Video...simple, concise, thorough. Perfect for explaining submit, validation, etc.

[solartcom]

It's always a good day when I see a new upload from you !

[AlainBoudard]

Clean and simple approach, well done Josh !

[ranjanadeore]

Thank you sir for uploading great tutorials

[mariosfrixou]

I always use formly in my angular projects. Never bothered with angular’s FormBuilder and never had to be honest!

[petraveryanov]

Isnt it kinda standard approach? Except that strange 'onBlur' thing e.g.. if I entered invalid e-mail, then clicked submit, then entered valid e-mail I will still see validation error which is weird.

[daniellynch]

How did you place the custom validator in like that? I always have to do a long call including a this bind, and have to inject the validator in the component constructor

[ankit]

already used it in a few places but the issue is I have [disabled] bind with form.invalid and it does not update until I click out of the field. so users will never get to know if the value is right or not. did you face similar issue ?

[kandeepasundaram]

Is there a way to clear the form validation errors on focus of any fields?

[loko]

In this case we could also createForm.dirty in template instead of form.dirty, right? its still reference this same form

[Billy_Herrington__]

This looks to me so over complicated tbh. Why do you need #form, when you can just use form.markAllAsTouched() in submit method, and in template you will do like this ngif = control.touched && control.errors.required (or what ever your error is named)

[scuroguardiano]

Can't we just mark form as dirty on submit? One line in component logic and much simpler conditions in template.

[rhatalos]

I think a good idea would be to create an error component, which displays default messages for the existing validators.

[rajatnegi]

How is the template html color coded in the ts file ? Or is it a ionic specific thing. Sorry i haven't used ionic yet.

[ReadyVred]

this is great, but how can you display a multiple error messages ? or maybe if the input have 2 condition like required and maxlength, so the message must be different on each validation.. how can we achieve that ? btw thanks for the tutorial

[jorgerenteral]

What do you think about the && syntax?

[mahmoudtarek]

Thanks for Your video. But to be honest i think this is too much for handling validation not a simple approach why you do not just use markAllAsTouched()