good tutorial thank you! could you also provide the Angular version you are using ? would be nice to know that at the beginning of the tutorials, or did I maybe miss it somewhere?
this is nice, in order to unbloat the file i would suggest creating an error component that takes an the errors and formControls and displays them when ever error happens. with the right modularity this could save some massive time and allow you DRY code. (this is not the subject i know )
@@sam.s6686 i didn't really find any example of this online. however here is what you can do: create a component that takes the error object stored in the form. this components goal is to display the error and a detail of this error so you can write all the needed logic there. (i suggest you study the shape of the error object) then instead of creating a div with ngif or @if simply use an instance of this component for each input of your form. when there is an error your component should display the error and why it happened. note that angular material can display the common errors of a form out of the box. you should also read the document on the angular material inputs.
@MonsterlessonsAcademy ok, that's really helpful. I was also reading a bit about dependency injection in Angular and got to know that if we use @Injectable() and inject the service within a class it will create a single instance of it instead of recreating the same instance again and again. However even in my team, my collegues create functions the way you have shown. So I'm starting to question the authenticity of what I read. Can you please clarify???
@@manojv2893 We typically use provided in root in a service and it creates a singleton for the whole project. helper function is just a function. It's not an injectable.
@@MonsterlessonsAcademy just one last doubt. Suppose we call the same helper function 2-3 times within a class, will it create 2-3 instances of the same function unlike the injectables?
Why not use form field getter in component ts for example `get firstName(): AbstractControl { return this.form.get('firstName'); }` and then in template `@if (firstName.invalid ...`
What if I only want the errors to show when I click outside and not when I'm am still typing so that I will not get distracted or slightly pissed off that I haven't finished typing yet.
whats the difference with form = new FormGroup({ name: new FormControl(null, [Validators.required, Validators.minLength(8)]) desc: new FormControl(null) })
"my speak english very bad. So, my name is Boris. I gotta go home to Albania to work on war factory and build tanks. London is a capital of Great Britain!" Damn, dude, I know it is very important to support all kinds of spreading knowledges, but at first you should work on your English pronunciation and only then play role of youtube blogger. My ears are bleeding right now! And I am still silent about how you look (not event close to Brad Pitt). If it is so necessary to practice English or acting or acting in English, there are so many platforms for it. I don't think that non-public frontend work for IT company brings less income than blogging (but who knows I am not an Angular blogger from USSR). For Christ's sake.
WATCH NEXT: Angular Interview Questions and Answers - Dominate Your Next Interview - ua-cam.com/video/5A_YKlVWMPo/v-deo.htmlsi=2DCn7yspEAAJ2H6l
I always find something new for me in your videos. Pretty good work. Thanks!
Awesome, thank you!
Awesome lesson
Glad you think so!
Very nice. It really hit the spot.
Glad to hear that!
Nice guide, thanks for your work
Glad you enjoyed it!
Great lesson!
Thanks! 😃
good tutorial thank you! could you also provide the Angular version you are using ? would be nice to know that at the beginning of the tutorials, or did I maybe miss it somewhere?
You can always check it in the source code under the video
@@MonsterlessonsAcademy thanks :)
this is nice, in order to unbloat the file i would suggest creating an error component that takes an the errors and formControls and displays them when ever error happens.
with the right modularity this could save some massive time and allow you DRY code.
(this is not the subject i know )
Sure. You can split it like you want. I just showed the most simple and basic way, so people understand how it works.
Hi, can you please refer me to an example on how to do that
@@sam.s6686 i didn't really find any example of this online.
however here is what you can do:
create a component that takes the error object stored in the form. this components goal is to display the error and a detail of this error so you can write all the needed logic there.
(i suggest you study the shape of the error object)
then instead of creating a div with ngif or @if
simply use an instance of this component for each input of your form.
when there is an error your component should display the error and why it happened.
note that angular material can display the common errors of a form out of the box.
you should also read the document on the angular material inputs.
Why did you write the custom validation functions outside the class component? Are there any pros and cons for that?
It a just a reusable function so I would put it somewhere together with other validators. Like helpers/custom-validators.ts
@MonsterlessonsAcademy ok, that's really helpful. I was also reading a bit about dependency injection in Angular and got to know that if we use @Injectable() and inject the service within a class it will create a single instance of it instead of recreating the same instance again and again. However even in my team, my collegues create functions the way you have shown. So I'm starting to question the authenticity of what I read. Can you please clarify???
@@manojv2893 We typically use provided in root in a service and it creates a singleton for the whole project. helper function is just a function. It's not an injectable.
@@MonsterlessonsAcademy just one last doubt. Suppose we call the same helper function 2-3 times within a class, will it create 2-3 instances of the same function unlike the injectables?
@@manojv2893 Functions don't create instances. It's just a piece of code.
which themes you are using in vscode
It's gruvbox
❤superb
Thanks 🤗
@if decorator is not working in angular 15. what is the issue?
It is not available in angular 15. Use *ngFor directive instead.
So...do reactive forms work in a zoneless environment?
everything works in zoneless environment
what is your fonts
Monaco
Why not use form field getter in component ts for example
`get firstName(): AbstractControl {
return this.form.get('firstName');
}`
and then in template `@if (firstName.invalid ...`
It's a matter of taste. You can do that
What if I only want the errors to show when I click outside and not when I'm am still typing so that I will not get distracted or slightly pissed off that I haven't finished typing yet.
There is touched property
I need to connect
whats the difference with
form = new FormGroup({
name: new FormControl(null, [Validators.required, Validators.minLength(8)])
desc: new FormControl(null)
})
There is no difference. You can provide validators if you need to but it is not mandatory
@@MonsterlessonsAcademy okay, nice. thanks
A comment for the algorithm
Thanks!
"my speak english very bad. So, my name is Boris. I gotta go home to Albania to work on war factory and build tanks. London is a capital of Great Britain!" Damn, dude, I know it is very important to support all kinds of spreading knowledges, but at first you should work on your English pronunciation and only then play role of youtube blogger. My ears are bleeding right now! And I am still silent about how you look (not event close to Brad Pitt). If it is so necessary to practice English or acting or acting in English, there are so many platforms for it. I don't think that non-public frontend work for IT company brings less income than blogging (but who knows I am not an Angular blogger from USSR). For Christ's sake.