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 :)
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)
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.
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 ?
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.
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
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
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.
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()
Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076
I love the fact that you expleind in detail what that #form="ngFrom" means. Thanks for that.
I use forms all the time and had no idea!
I also appreciated that. It's difficult to find more technical yet simple explanation, would like to see more 🤔👀
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 :)
This channel is pure gold. I love how you touch the backside details.
Everyone loves a good backside touch.
Great Video...simple, concise, thorough. Perfect for explaining submit, validation, etc.
Clean and simple approach, well done Josh !
Thank you sir for uploading great tutorials
It's always a good day when I see a new upload from you !
Thanks for explaining ngForm
I always use formly in my angular projects. Never bothered with angular’s FormBuilder and never had to be honest!
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)
+1
Amazing! Thanks Josh
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.
Great video as always. Thanks!
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 ?
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.
@@JoshuaMorony avoid button disabling is the best approach because of accessibility reasons.
Great videos, just subscribed 👍!
I think a good idea would be to create an error component, which displays default messages for the existing validators.
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
Thanks bro
In this case we could also createForm.dirty in template instead of form.dirty, right? its still reference this same form
Is there a way to clear the form validation errors on focus of any fields?
Can't we just mark form as dirty on submit? One line in component logic and much simpler conditions in template.
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.
The Angular Language Service extension handles syntax highlighting for inline templates
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
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.
👍👍
why is my gms softing like static?
nice video but imo music is too loud
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()
What do you think about the "createForm.controls.email.touched && createForm.controls.email.errors" syntax?