Angular reactive forms validation
Вставка
- Опубліковано 14 лип 2024
- In this video we will discuss implementing validation in a reactive form.
Text version of the video
csharp-video-tutorials.blogspo...
Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
Slides
csharp-video-tutorials.blogspo...
Angular 6 Tutorial
• Angular 6 tutorial for...
Angular 6 Tutorial Text Articles & Slides
csharp-video-tutorials.blogspo...
Angular, JavaScript, jQuery, Dot Net & SQL Playlists
ua-cam.com/users/kudvenka... - Наука та технологія
The best tutorial for angular reactive forms for me. Thanks brother :)
I like your tutorial very much. Excellent teacher you are . I like your way to describe the things in easy manner.
You're a great teacher. You made it seem so easy.. Thank you
You can also try this tutorial for more info with some industrial example: ua-cam.com/video/Nk3qtkxN7s8/v-deo.html
for those who are using bootstrap 4 ..can use "alert alert-danger" instead of "has-error"
Tqq..it worked
Thanks a lot
has-error is a custom class
great voice, very pleasant and very well explained
Thanks for your tutorials.
You can also try this tutorial for more info with some industrial example: ua-cam.com/video/Nk3qtkxN7s8/v-deo.html
Thanks for another amazing video Kudvenkat. On 10:07, is there any harm to wrap that condition in a function? As far as I see, functions defined in the DOM is called 100s of times based on the value changes on the form so it kind of bothered me. But I wonder if the same thing happens for even if we use just like you did on the dirty and touched and error checks via form control itself?
good tutorials
👍👏
Nice Video , Thank you for sharing #TapanDubey
Thank you very much for this! I think a more accurate error message would be 'Full Name must be greater than 1 character and less than 11 characters'.
Thank you
in password validation how to set minimum one upper-case & one lower-case & one special character...? can you please add it in this video....
Sir , I am new in Angular and I want to use drag and drop form builder like bootstrap form builder , please help me as soon as possible
sir for example consider if we are entering 3 chars there are no errors hence the errors returns null and console throws error cannot read property required of null
My this part of validation is not working and displays the error message Object is possibly null .
facing same error!
This is a great tutorial. I have a Question. I have my form working the same way as yours do. But when I submit the form ignoring the error shown, it gets submitted. So what is the point of showing this field validation if i have to check the fields on submit function weather they are empty or not? Or is there something I am missing?
then please use [disable] = !form.valid for the submit button
for min length and max length the console says cannot read property minlength of null
I guess u have not used a [ ] for validators , i mean :
fullname: [ '' , [Validators.required, Validators.minLength(2), Validators.maxLength(10)] ]
Your voice is completely changed, when I hear it in SQL server which is 6 years back.
correct ....:)
Hi Venkat,
I would like to clarify with you regarding the following boolean expression. If the Full Name form control is empty on the initial page load or if we did not supply a valid value for the Full Name form control, then the errors property on the Full Name form control will return true. Am I correct ?
employeeForm.get('fullName').errors
Best regards.
Edward
No "employeeForm.get('fullName').errors" does not return true or false.
It returns either NULL or ValidationErrors object. If it returns NULL, then it means on the fullName formcontrol there are no validation errors. If it returns a ValidationErrors object then that means there are validation errors.
Hope this answers your question.
If that is the case, how the following boolean expression works with either NULL or ValidationErrors object ???
[ngClass]="{'has-error': ((employeeForm.get('fullName').touched ||
employeeForm.get('fullName').dirty) &&
employeeForm.get('fullName').errors)
In addition to true and false, there is also truthy and falsy.
All the following values evaluates to a falsy value in a boolean context
false
'' or "" Empty string, i.e a pair of single or double quotes with nothing in between them
NaN i.e Not a Number
0
null
undefined
Everything else, like the following values evaluates to a truthy value in a boolean context
true
[]- an empty array
{} - an empty object
15 - Number other than ZERO
'SomeString' - Some string value, other than an empty string
So in our case if the following statement returns NULL, it evaluates to falsy value because it is used in a boolean context. So the has-error class is not added.
employeeForm.get('fullName').errors
On the other hand, if the following statement returns a ValidationErrors object, it evaluates to truthy value because it is used in a boolean context. So it adds the has-error class.
employeeForm.get('fullName').errors
So in our case if the Full Name field or form control is empty, the "employeeForm.get('fullName').errors" statement returns a ValidationErrors object, which will evaluate to truthy value.
On the other hand, if the Full Name field or form control is not empty, the "employeeForm.get('fullName').errors" statement returns NULL, which will evaluate to falsy value.
Is my understanding correct ???
You got it.
Why are you not using bootstrap 4 in your latest tutorials ?
hi venkat sir good evening
in this tutorial i have a problem with displaying the validation error message like
"full name must me 2 characters and less than 10 characters" was not displayed
when we type the full name more than 10 characters its become error but the error message is not displayed after the text box
please guide me how to get this.
thank you.
use this fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(10)]],
Hi Sandeep, did you figure this out? I'm having the same problem.
NM, worked out, I was using camel case in the html for checking min/max length and so even though there were errors, they were not being caught be the *ngIf check for this span.
I am confused how to do validation in nested form builder from html side. How to get the errors please let me know
Im getting error as object is null in the empform. Get('fullname'). errors can anyone help me
nice tutorial. I learned something from you. but , in your html, typing the same conditions many times is ugly, you have to refactor.
hello sir i need to validate mat-select field using form group used your approach but when is use validation on mat-select field react on 2nd click that is my code
{{ country.viewValue }}
Please select your country
{{formErrors.country}}
sir aap ne html page me table tage me jo coding ki hai uska code to bataye hi nhi jisse run karne par table so nhi ho rhi hai
You can also try this tutorial for more info with some industrial example: ua-cam.com/video/Nk3qtkxN7s8/v-deo.html
I am getting this error ERROR TypeError: Cannot read property 'get' of undefined
can anyone please tell me what is the difference between angular tutorial and angular curd tutorial of him.which one i need to start learn
For basics understanding start first Angular 2 tutorials, After that start Angular CRUD tutorials which will clear all the concepts and basics after that start Angular 6 Tutorials
@@pranjalevince9371 Thank you
For me Validators is not working What is the Problem im using BS4 version
Hello sir, good tutorial with great efforts. Please make a tutorial or udemy series on ionic 3/4 framework.
HI guys , I got Cannot read property 'touched' of null error
This validators give error
For that I used
Validators.compose([Validators.required, Validators.minLength(3),Validators.maxLength(10)])
year to year programming language seems to be more painful than it was.
what is the difference between isTouched and isDirty
if Validators.required is a method , then why are you not using parenthesis () ?
for errors.required it says cannot read property of null
stackoverflow.com/questions/45431489/async-custom-validation-causes-an-error-to-the-console-cannot-read-property-r
@@Bettertodo23 Cannot read property 'touched' of null
@sahil use '?' like errors?.required
if your "Fullname
must not be lower than 2 and higher than 10 characters" is not displaying. Try changing the employeeForm.get('fullName').errors?.minLength into employeeForm.get('fullName').errors?.minlength and the same to the maxLength. Goodluck
Will Bootstrap 4 work with this ?
Use is-invalid instead of has-error and also for some reason I needed to attached the ng-class to the input instead of the label as he does here. If anyone knows why I'd love to understand that.
First Name
Please enter your First Name
Thank you
Hi Sir,
I got error ERROR TypeError: "_co.formbuilder.get is not a function