Angular 10 Tutorial #65 - Reactive Forms State and Validations | Angular 10 Tutorial For Beginners
HTML-код
- Опубликовано: 8 сен 2024
- Angular 10 Tutorial, Angular reactive form states validation example tutorial, Reactive form state validations example angular, Angular template driven forms tutorial, Angular reactive forms tutorial, Angular 10 Tutorial For Beginners, Angular full tutorial, Angular learn angular applications, How to develop Angular Apps, Angular tutorials building and deploying Angular Apps, Building angular applications in Angular 10, Learn to build Angular 10 applications, Angular build and deploying applications, angular 10 building and deploying in Angular Apps, angular Apps build and deployment in Angular 10, 6,7,8, 9, angular 8 example,
Angular 10 tutorial for beginners, angular 10 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 10 crash course, angular 10 tutorial for beginners step by step, angular tutorial for beginners 2020,angular tutorial 2020,angular code examples, angular for freshers, angular tutorial for experienced, arc tutorials angular, arc tutorials, angular 10 full course, angular 10 tutorial for beginners, angular 10 tutorial
Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular introduction, angular version history, angular full tutorial series, best angular tutorial.
Notes in GitHub repo: github.com/arc...
Angular 10 Tutorial #1 -
• Angular 10 Tutorial #1...
Angular 10 Tutorial #2
• Angular 10 Tutorial #2...
Angular 10 Tutorial #3 - Upgrade to Angular 10
• Angular 10 Tutorial #3...
Angular 10 Tutorial #4 - Install Angular CLI tutorial
• Angular 10 Tutorial #4...
Angular 10 Tutorial #5 - Install Bootstrap in Angular App
• Angular 10 Tutorial #5...
Angular 10 Tutorial #6 - Install Angular Material in Angular Application
• Angular 10 Tutorial #6...
Angular 10 Tutorial #7 - Folder Structure of Angular Apps
• Angular 10 Tutorial #7...
Angular 10 Tutorial #8 - Boot Process of Angular Apps
• Angular 10 Tutorial #8...
Angular 10 Tutorial #9 - Package.Json and Package-lock.json
• Angular 10 Tutorial #9...
Angular 10 Tutorial #10 - Angular CLI Tutorial
• Angular 10 Tutorial #1...
Angular 10 Tutorial #11 - App Architecture
• Angular 10 Tutorial #1...
Angular 10 Tutorial #12 - Modules
• Angular 10 Tutorial #1...
Angular 10 Tutorial #13 - Components
• Angular 10 Tutorial #1...
Angular 10 Tutorial #14 - Component Lifecycle Hooks
• Angular 10 Tutorial #1...
Angular 10 Tutorial #15 - Component Communications
• Angular 10 Tutorial #1...
Angular 10 Tutorial #16 - Templates in Angular Components
• Angular 10 Tutorial #1...
Angular 10 Tutorial #17 - Directives in Angular 10
• Angular 10 Tutorial #1...
Angular 10 Tutorial #18 - Structural Directives in Angular 10
• Angular 10 Tutorial #1...
Angular 10 Tutorial #19 - ngIf in Angular 10
• Angular 10 Tutorial #1...
Angular 10 Tutorial #20 - ngFor in Angular 10
• Angular 10 Tutorial #2...
Angular 10 Tutorial #21 - ngSwitch in Angular 10
• Angular 10 Tutorial #2...
Angular 10 Tutorial #22 - ngStyle in Angular 10
• Angular 10 Tutorial #2...
Angular 10 Tutorial #23 - ngClass in Angular 10
• Angular 10 Tutorial #2...
Angular 10 Tutorial #24 - Data Binding in Angular 10
• Angular 10 Tutorial #2...
Angular 10 Tutorial #25 - Interpolation in Angular 10
• Angular 10 Tutorial #2...
Angular 10 Tutorial #26 - Property Binding in Angular 10
• Angular 10 Tutorial #2...
Angular 10 Tutorial For Beginners
• Angular 10 Tutorial #0...
Angular 9 Full Tutorial For Beginners
• Angular 9 Tutorial For...
Angular CRUD Tutorial Step by Step
• Angular CRUD with Web ...
Angular Testing Tutorial
• Angular Testing Tutori...
Perfect tutorial to get good hands on in Angular. Thank you Sridhar for explaining step by step very clearly and it is really easy to understand.
This tutorial series is absolutely the best Angular content available for free..
Thanks Sir, Its really helpful.
Keep Up the good work.
You are most welcome. Thank you so much for your kind words
I'm curious why the control must lose focus once in order for any of these error conditions to be true. In other words, if I reload the form, then click in the loan name box, it seems to me that the required and minlength errors should immediately be true, and of course once I exceed the max length, maxlength will be true. However none of these ngIf'd s will appear until the text box has lost focus at least once. After that, if I return to the text box, each of the error conditions are reflected immediately as they become true. I guess that's a more user-friendly way to handle it -- I don't want to be preached to about a field being required when I've just placed my cursor in it for the first time, but I'm wondering why there is that subtle difference.
Best Angular Tutorial on youtube!
Thanks mate for your support!
very easy to learn and follow you sir, please keep uploading like this series
Thank you, I will
very good
Thank you! Cheers!
thank you..Sridhar ..
Thank you so much Ahmad for your support
Hi sir, I am getting an error (object is possibly 'NULL') while displaying an error message in reactive forms(65)
please respond to this...im having the same error
@@saketkumar9291 Hello,
you can try the below
Loan Name is Required
Loan Name must have minimum 10 characters
Thanks
@SRIKANTH P Glad to know your issue resolved 🙂
@@amarnath602 !.hasError('required') add the " ! " excclamation mark before the obj.. which is the on-null assertion operator
Open tsconfig.json and add "strictNullChecks": false to angularCompilerOptions
Try to make video on dynamic forms also it was asked in one of my interview
Thats coming right up tomorrow 👍👍
Hello All,
I fixed the issue by changing the syntax and my version is 12.
Loan Name is Required
Loan Name must have minimum 10 characters
Please try this, it may help who facing this hasError issue.
Thanks
Hello Sir Awesome teaching style and nice explanation I have never seen this teaching style could you please create react js videos in depth
Hello sir.. First Of all thank you so much for this amazing series. And
I just noticed that I think part-55, that is about template driven form's is missing from playlist.... Can you please check and upload that part. Thank you. .....
Thanks buddy for the tip. I have now added it to the playlist. Thanks for your kind support
Thank you sir..... Always.
Hi Nicely explain but just one thing to highlight that it seems syntax has changed. I tried with mentioned syntax but it didn't work for me.
*ngIf="addLoadTypeForm.get('loanName').hasError('required') && addLoadTypeForm.get('loanName').touched"
Syntax which worked for me is pasted below
*ngIf="addLoadTypeForm.controls['loanName'].errors?.required && addLoadTypeForm.controls['loanName'].touched"
I don't know why but as I am using *ngIf it shows an error that is
Error occurs in the template of component LoanTypesComponent.
It's showing red underlined below required and touched
Sir it's showing error with required and touched and hasError
i don't know why but minLength dosen't work but required is working
had the same issue, try to type "minlength" instead of "minLength", this worked for me
Hi sir
i am getting error can you help me out this
Enter LoanName
Error: src/app/admin/admin.component.html:9:80 - error TS2531: Object is possibly 'null'.
it showing red mark at hasError
i am too facing the same problem
@@sureshpalthiya3204 You can try this
Loan Name is Required
Loan Name must have minimum 10 characters
Thanks
@@amarnath602 yeah thanks buddy it worked
!.hasError('required') add the " ! " excclamation mark before the obj.. which is the on-null assertion operator
Open tsconfig.json and add "strictNullChecks": false to angularCompilerOptions
Dirty and pristine not cleared
Sir I want your help in project. Can you please tell how can I contact you
Hi Shruti. Pls write to me at soorya.aaradhya@gmail.com
I believe there is a sytax change while displaying error message and I have resolved that as
follows: FirstName is Required
Hi, I have added "strictNullChecks" : false in my tsconfig.json and separated these 2 ngIf conditions in different parantheses, as there was an errror - "object is possibly 'NULL'" while writing the hasError(). Would like to know if manipulating the tsconfig.json for these bug fixes while working for a real time project is a good practice or not.
!.hasError('required') add the " ! " excclamation mark before the obj.. which is the on-null assertion operator
@@SURIYA-pp4iu tqq soo much ... u saved me.
@@sudha.i4593 😋😋
i got error for required but not getting any error for minlength and maxlength.. plzz help me
11:13 That's a bad DX (developer experience). Instead, you should use the invert and do an early exit for a cleaner code, i.e.
if (this.addLoanTypesForm.invalid) {
return;
}
// rest of code