One very tricky part in the minLength in the class, but in the template. the spelling is minlength with a lower case l in the template file, I got stuck there for a long time, everything looked correct and doesn't show an error until I found it. Than you for the great tutorials, you deserve the best instructed on the youtube platform. Good continuation.
@@hiteshkumar7625 I think get() does work, but it is very strange and I sadly could not find information to explain it. At the 3:20 second mark, we write in code to check the current inputs valid and touched status. It is odd that the first time you try to use .get() for the invalid state, it appears that the auto code suggestion doesn't bring it up, but if you keep writing in code, the .get() appears for the touched part of the code. So it does work, but I can't explain why.
For those having errors with [class.is-invalid], be sure to have: 1.) Bootstrap CDN pasted on your index.html 2.) the [class.is-invalid] is inside the INPUT element. I made the mistake of putting it in
in the class : userName: ['', [Validators.required, Validators.minLength(3)]], and in html: Username must be at least 3 characters pleae note that 2 is different: minLength and minlength
Certainly! In Visual Studio Code, you can use the following shortcut to replace all occurrences of a specific text: Windows/Linux: Ctrl + H Mac: Cmd + Option + F This will open the "Replace" input box at the top of the editor, allowing you to enter the text you want to find and replace. After entering the text, you can click on the "Replace All" button or use the keyboard shortcut: Windows/Linux: Ctrl + Alt + Enter Mac: Cmd + Option + Enter This will replace all occurrences of the specified text in the entire file.
I watched both TDF and reactive forms approach, but the reactive approach seems to be easy to code and maintain as I feel others may have different opinions
add minlength="3" in input element if minimum length error is not working for you. after using getter method if you arefacing the invalid/touched error then use ?. istead of just . eg: userName?.invalid
if you want to make the input or textarea border red when they are not valid or touched: whithout writting the html code conditions i recommande you to add just this css tricks in your css file input.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched { border: 1px solid red; } 😁 i'm sure, it help you
NOTE FOR ALL: During the creation of the getter, the method didn´t work in my app with the ";" semikolon at the end of the method. Is this in context with some upgrades of angular??
Class binding not working for me in both reactive forms and also in template driven forms.i imported all the necessary classes and done all the steps like you but not getting the visual feedback .please anybody help me!
Thanks for the video. For some reason, This line works *ngIf="registrationForm.get('userName').errors?.required but this is not working *ngIf="registrationForm.get('userName').errors?.minlength I replace that with registrationForm.controls.userName.errors.minlength and it works I tried my best to match spelling with the video
@@yashasvrao4138 you will need the non-null assertion operator when using the get method in html. It is the symbol ' ! ' This is the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined." Sometimes the type checker is unable to make that determination itself. You should use: *ngIf="registrationForm.get('userName')!.errors?.required *ngIf="registrationForm.get('userName')!.errors?.minlength
Angular 11 With problem for "class.is-invalid" on userName field, access through the registrationForm.controls. In the TS file, use can create the following shortcut: get f(){ return this.registrationForm.controls; } In the HTML file, you can use the following shortcut or full control reference: NOTE:: An example and explanation of a "shortcut" is explained near the end of the video.
Angular 13 the version in the video was not working so I worked on it and the version below worked for me. the valid and touched validators are now in the controls property, you must use optional chaining and the value must be put into an array ---------------------- --------------------- The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid honestly though, this looks really messy, but that is how it works apparently
If you are planning to do this to the Nested form-control, take example: postalCode. At that time use get access as registrationForm.get('address.postalCode') and also if you want to replace this with a getter method like get postalCode(){ return this.registrationForm.get('address.postalCode') } and now you after replacing, the HTML code may look like Postal code is required Postal code must be atleast 6 characters
In angular 6, I get an error "Property 'minlength' comes from an index signature, so it must be accessed with ['minlength'].". Blow is how I fix it *ngIf="registrationForm.get('userName')?.errors?.['required']" *ngIf="registrationForm.get('userName')?.errors?.['minlength']"
Hello there, I get an error with . I have install bootstrap cdn (so, this is not the reason). I have followed the option gave by the user MeIOnGames adding a function in the app.cpomponent.ts but I would like to know why is not working in the way exposed in this video. IO will appreciate any help
For me the errors caused by invalid and touched could be resolved just by adding to app.component.ts: get userNameFunction() { return this.registrationForm.get('userName')?.invalid && this.registrationForm.get('userName')?.touched; } and adding to app.component.html:
Hi I am facing isssue in this part- Error: app.component.html:200:39 - error TS2531: Object is possibly 'null'. 200 registrationForm.get('userNamee').touched" ~~~~~~~ My Angular version - Angular: 15.0.4
One very tricky part in the minLength in the class, but in the template. the spelling is minlength with a lower case l in the template file, I got stuck there for a long time, everything looked correct and doesn't show an error until I found it. Than you for the great tutorials, you deserve the best instructed on the youtube platform. Good continuation.
Very good remark, was trying to figure out why I am missing the message
That helps, was stuck figuring out what's wrong..!!
if the red border is not working for you, please try to express the class.is-invalid in this way:
Username
Username is required
but why get() is not working ?..
@@hiteshkumar7625 I think get() does work, but it is very strange and I sadly could not find information to explain it.
At the 3:20 second mark, we write in code to check the current inputs valid and touched status.
It is odd that the first time you try to use .get() for the invalid state, it appears that the auto code suggestion doesn't bring it up, but if you keep writing in code, the .get() appears for the touched part of the code.
So it does work, but I can't explain why.
thank you
Thank you
thanks man!!
I'm getting error on invalid and touch... "Saying object is possibly null"
Don't forget to chagne : userName?.errors?.required
to : userName?.errors?.['required']
from Angular v13, it changed a bit from an old code .
great bro,thanks for your suggestion, it was really helpful
Hello Sir Thanks for great tutorial.
Please create one min-project Anuglar 6 series . It's very help full for all of us
great video for basic validation
For those having errors with [class.is-invalid], be sure to have:
1.) Bootstrap CDN pasted on your index.html
2.) the [class.is-invalid] is inside the INPUT element. I made the mistake of putting it in
[class.is-invalid] and [class.d-none] is not working in my project, i added bootstrap CDN also but not work,plz help me
please try to use:
Username
@@MXDMND_ Thanks, you save my time :D
@@MXDMND_ Thanks . It worked for me
@@sayalibarge18 You are welcome :)
@@jamuna5181 Welcome :)
in the class : userName: ['', [Validators.required, Validators.minLength(3)]], and in html: Username must be at least 3 characters
pleae note that 2 is different: minLength and minlength
Hello Sir Thanks for great tutorial !
Hi! Thanks for this great tutorial.
Could you please tell what shortcut you press at 10:36 to replace all the text.?
drag mouse to highlight text and press CTRL + F2 on Keyboard
Certainly! In Visual Studio Code, you can use the following shortcut to replace all occurrences of a specific text:
Windows/Linux: Ctrl + H
Mac: Cmd + Option + F
This will open the "Replace" input box at the top of the editor, allowing you to enter the text you want to find and replace. After entering the text, you can click on the "Replace All" button or use the keyboard shortcut:
Windows/Linux: Ctrl + Alt + Enter
Mac: Cmd + Option + Enter
This will replace all occurrences of the specified text in the entire file.
Great work, many thanks
9:06 why two error messages is not displaying ,even if we didnt set the class.d-none
I watched both TDF and reactive forms approach, but the reactive approach seems to be easy to code and maintain as I feel others may have different opinions
I agree
excellent tutorial, what other tutorial do you suggest to go further with angular? I would like to follow up after i finish this one
Thank you so much, man!
add minlength="3" in input element if minimum length error is not working for you.
after using getter method if you arefacing the invalid/touched error then use ?. istead of just .
eg: userName?.invalid
You can just add ? operator before .valid or .touched
like this :
Thank you it worked
Thankyou very much
thanks broooo it's working fineeee
if you want to make the input or textarea border red when they are not valid or touched: whithout writting the html code conditions i recommande you to add just this css tricks in your css file
input.ng-invalid.ng-touched,
textarea.ng-invalid.ng-touched {
border: 1px solid red;
}
😁 i'm sure,
it help you
For New Angular version
Username is Require
Username must be at letst 3 characters
thanks broo
NOTE FOR ALL:
During the creation of the getter, the method didn´t work in my app with the ";" semikolon at the end of the method. Is this in context with some upgrades of angular??
If I m not having bootstrap class then which variable I used for validation.
?
class.is-invalid not working even installed bootstrap.
if someone is getting error using errors?.required use errors?.['required'] and refer stackoverflow
When i tried the same validation in the
sir which way is the better to create a forms in angular either template driven forms or reactive forms?????
reactive forms
how you are getting Intellisense while writing HTML code. i am using same vs code.
[class.is-invalid] and [class.d-none] is not working in my project, please help
These are custom bootstrap classes. Have you added the bootstrap CDN to index.html?
Does this work with Bootstrap 5 as well?
Hello Brother! what is the different between formGroup.get and formGroup.controls?
Onemore, do you have any document that talk about class.d-none?
Class binding not working for me in both reactive forms and also in template driven forms.i imported all the necessary classes and done all the steps like you but not getting the visual feedback .please anybody help me!
Thanks for the video.
For some reason,
This line works
*ngIf="registrationForm.get('userName').errors?.required
but this is not working
*ngIf="registrationForm.get('userName').errors?.minlength
I replace that with
registrationForm.controls.userName.errors.minlength
and it works
I tried my best to match spelling with the video
this is not working for me please help
@@yashasvrao4138 you will need the non-null assertion operator when using the get method in html. It is the symbol ' ! '
This is the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined." Sometimes the type checker is unable to make that determination itself. You should use:
*ngIf="registrationForm.get('userName')!.errors?.required
*ngIf="registrationForm.get('userName')!.errors?.minlength
Angular 11
With problem for "class.is-invalid" on userName field, access through the registrationForm.controls.
In the TS file, use can create the following shortcut:
get f(){
return this.registrationForm.controls;
}
In the HTML file, you can use the following shortcut or full control reference:
NOTE:: An example and explanation of a "shortcut" is explained near the end of the video.
Angular 13
the version in the video was not working so I worked on it and the version below worked for me.
the valid and touched validators are now in the controls property, you must use optional chaining and the value must be put into an array
----------------------
---------------------
The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid
honestly though, this looks really messy, but that is how it works apparently
this worked for me.. Thnx a lot
If you are planning to do this to the Nested form-control, take example: postalCode. At that time use get access as registrationForm.get('address.postalCode') and also if you want to replace this with a getter method like
get postalCode(){
return this.registrationForm.get('address.postalCode')
}
and now you after replacing, the HTML code may look like
Postal code is required
Postal code must be atleast 6 characters
In angular 6, I get an error "Property 'minlength' comes from an index signature, so it must be accessed with ['minlength'].".
Blow is how I fix it
*ngIf="registrationForm.get('userName')?.errors?.['required']"
*ngIf="registrationForm.get('userName')?.errors?.['minlength']"
dom you have any idea why is not working in the way the video is shown?
great. thank you
Hello there, I get an error with . I have install bootstrap cdn (so, this is not the reason). I have followed the option gave by the user MeIOnGames adding a function in the app.cpomponent.ts but I would like to know why is not working in the way exposed in this video. IO will appreciate any help
For me the errors caused by invalid and touched could be resolved just by adding to app.component.ts:
get userNameFunction() { return this.registrationForm.get('userName')?.invalid && this.registrationForm.get('userName')?.touched; }
and adding to app.component.html:
it is working for me, thanks a lot but do you know why is not working the way is made in the video?
@@chuchotech5513 Due to the change of the new version compared to the old version
Only works properly for me when in , "userNameFunction" is changed to "userNameFunction()". Maybe because I'm running much newer versions.
Never mind, missed "get" at beginning of original line.
Hi I am facing isssue in this part- Error: app.component.html:200:39 - error TS2531: Object is possibly 'null'.
200 registrationForm.get('userNamee').touched"
~~~~~~~
My Angular version - Angular: 15.0.4
Try registrationForm.controls['userName'].touched
For me these both ways are working!
1. regForm.controls.username.valid
2. regForm.controls['username'].valid
Any objections?