A simple approach to displaying form validation messages in Angular

No video

A simple approach to displaying form validation messages in Angular

Рет қаралды 14,899

Joshua Morony

Күн бұрын

Пікірлер: 37

@JoshuaMorony Жыл бұрын

Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076

@baluditor 2 жыл бұрын

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

@additionaddict5524 2 жыл бұрын

I use forms all the time and had no idea!

@bromptonhorsing8597 Жыл бұрын

I also appreciated that. It's difficult to find more technical yet simple explanation, would like to see more 🤔👀

@CraigShearer 2 жыл бұрын

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 :)

@magmarrex5939 2 жыл бұрын

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

@kaibe5241 Жыл бұрын

Everyone loves a good backside touch.

@Rollout123 Жыл бұрын

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

@solartcom 2 жыл бұрын

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

@AlainBoudard 2 жыл бұрын

Clean and simple approach, well done Josh !

@ranjanadeore2957 2 жыл бұрын

Thank you sir for uploading great tutorials

@Billy_Herrington__ 2 жыл бұрын

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)

@setiadiprawiryo3797 2 жыл бұрын

@OLIV3R_YT Жыл бұрын

Thanks for explaining ngForm

@petraveryanov2572 2 жыл бұрын

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.

@mariosfrixou7003 Жыл бұрын

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

@jeremiasaragonbonilla2167 2 жыл бұрын

Amazing! Thanks Josh

@edavar6265 2 жыл бұрын

Great video as always. Thanks!

@ankit0120 2 жыл бұрын

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 ?

@JoshuaMorony 2 жыл бұрын

I don't disable form submit if the form is invalid - the user can still click the submit button and it will trigger showing the errors but won't actually submit the form. I don't know the in-depth UX reasoning behind this, but as far as I am aware this approach is preferable to disabling the submit button.

@andreafresu5009 2 жыл бұрын

@@JoshuaMorony avoid button disabling is the best approach because of accessibility reasons. Great videos, just subscribed 👍!

@scuroguardiano9787 Жыл бұрын

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

@dinesh.m7341 Жыл бұрын

Thanks bro

@rhatalos1997 2 жыл бұрын

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

@daniellynch3724 Жыл бұрын

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

@kandeepasundaram2501 Жыл бұрын

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

@loko1944 Жыл бұрын

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

@ReadyVred 2 жыл бұрын

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

@JoshuaMorony 2 жыл бұрын

If you want something more complex (e.g. showing specific error messages for multiple validations) then I wouldn't recommend the approach in the video. You could add some more logic onto it to grab the specific validator that failed and write a custom message for it, but at that point I think you would be better served either by: creating your own custom component/directive that takes in the form control and displays an error message, or better yet just use one of the existing libraries for dealing with forms since people have already solved this problem.

@rajatnegi3896 2 жыл бұрын

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.

@JoshuaMorony 2 жыл бұрын

The Angular Language Service extension handles syntax highlighting for inline templates

@nimitdesai93 2 жыл бұрын

why is my gms softing like static?

@szymonlisiecki2789 2 жыл бұрын

nice video but imo music is too loud

@thanhcongpham5422 2 жыл бұрын

👍👍

@mahmoudtarek745 Жыл бұрын

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()