Angular 10 Tutorial #65 - Reactive Forms State and Validations | Angular 10 Tutorial For Beginners

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.

Angular 10 Tutorial #1 -

Angular 10 Tutorial #2

Angular 10 Tutorial #3 - Upgrade to Angular 10

Angular 10 Tutorial #4 - Install Angular CLI tutorial

Angular 10 Tutorial #5 - Install Bootstrap in Angular App

Angular 10 Tutorial #6 - Install Angular Material in Angular Application

Angular 10 Tutorial #7 - Folder Structure of Angular Apps

Angular 10 Tutorial #8 - Boot Process of Angular Apps

Angular 10 Tutorial #10 - Angular CLI Tutorial

Angular 10 Tutorial #11 - App Architecture

Angular 10 Tutorial #12 - Modules

Angular 10 Tutorial #13 - Components

Angular 10 Tutorial #14 - Component Lifecycle Hooks

Angular 10 Tutorial #15 - Component Communications

Angular 10 Tutorial #16 - Templates in Angular Components

Angular 10 Tutorial #17 - Directives in Angular 10

Angular 10 Tutorial #18 - Structural Directives in Angular 10

Angular 10 Tutorial #19 - ngIf in Angular 10

Angular 10 Tutorial #20 - ngFor in Angular 10

Angular 10 Tutorial #21 - ngSwitch in Angular 10

Angular 10 Tutorial #22 - ngStyle in Angular 10

Angular 10 Tutorial #23 - ngClass in Angular 10

Angular 10 Tutorial #24 - Data Binding in Angular 10

Angular 10 Tutorial #25 - Interpolation in Angular 10

Angular 10 Tutorial #26 - Property Binding in Angular 10

Angular 10 Tutorial For Beginners

Angular 9 Full Tutorial For Beginners

Angular CRUD Tutorial Step by Step

Angular Testing Tutorial

[mumps]

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 <div>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.

[sravanreddy]

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.

[priyobrotoroy]

This tutorial series is absolutely the best Angular content available for free..
Thanks Sir, Its really helpful.
Keep Up the good work.

[murtazamohammadi]

very easy to learn and follow you sir, please keep uploading like this series

[sudeshkodavoor]

Try to make video on dynamic forms also it was asked in one of my interview

[parlakuruvasurendra]

Hello Sir Awesome teaching style and nice explanation I have never seen this teaching style could you please create react js videos in depth

[SanjayKumar-qtce]

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.

[saiprashanth]

Hi sir, I am getting an error (object is possibly 'NULL') while displaying an error message in reactive forms(65)

[bhushankhaladkar]

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.

&&


Syntax which worked for me is pasted below

&&

[ASHISHKUMAR-rjpn]

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.

[amarnath]

Hello All,

I fixed the issue by changing the syntax and my version is 12.

<div class="text-danger" && Name is Required</div>
<div class="text-danger" && Name must have minimum 10 characters</div>

Please try this, it may help who facing this hasError issue.

Thanks

[pubgadictive]

It's showing red underlined below required and touched

[pubgadictive]

Sir it's showing error with required and touched and hasError

[ravindrabangalore]

Hi sir
i am getting error can you help me out this
<span class="text-danger" && LoanName</span>

Error: - error TS2531: Object is possibly 'null'.
it showing red mark at hasError

[emlexkira]

i don't know why but minLength dosen't work but required is working

[shrutisaraf]

Sir I want your help in project. Can you please tell how can I contact you

[niharikagurnani]

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.

[selamawikahsai]

I believe there is a sytax change while displaying error message and I have resolved that as
follows: <div class="text-danger"
&& is Required</div>

[avi]

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 {
return;
}

// rest of code