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?
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 ???
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.
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.
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
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
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?
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
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.
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
I like your tutorial very much. Excellent teacher you are . I like your way to describe the things in easy manner.
The best tutorial for angular reactive forms for me. Thanks brother :)
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
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: ruclips.net/video/Nk3qtkxN7s8/видео.html
great voice, very pleasant and very well explained
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?
My this part of validation is not working and displays the error message Object is possibly null .
facing same error!
in password validation how to set minimum one upper-case & one lower-case & one special character...? can you please add it in this video....
Why are you not using bootstrap 4 in your latest tutorials ?
I am confused how to do validation in nested form builder from html side. How to get the errors please let me know
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
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.
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.
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
Thank you
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}}
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
Thanks for your tutorials.
You can also try this tutorial for more info with some industrial example: ruclips.net/video/Nk3qtkxN7s8/видео.html
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)] ]
Nice Video , Thank you for sharing #TapanDubey
Im getting error as object is null in the empform. Get('fullname'). errors can anyone help me
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
nice tutorial. I learned something from you. but , in your html, typing the same conditions many times is ugly, you have to refactor.
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: ruclips.net/video/Nk3qtkxN7s8/видео.html
good tutorials
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'.
I am getting this error ERROR TypeError: Cannot read property 'get' of undefined
Your voice is completely changed, when I hear it in SQL server which is 6 years back.
correct ....:)
what is the difference between isTouched and isDirty
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 guys , I got Cannot read property 'touched' of null error
if Validators.required is a method , then why are you not using parenthesis () ?
year to year programming language seems to be more painful than it was.
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
👍👏
This validators give error
For that I used
Validators.compose([Validators.required, Validators.minLength(3),Validators.maxLength(10)])
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
Hello sir, good tutorial with great efforts. Please make a tutorial or udemy series on ionic 3/4 framework.
Hi Sir,
I got error ERROR TypeError: "_co.formbuilder.get is not a function