Angular 9 Tutorial For Beginners #45- Reactive Forms - Validations

Angular 9 Tutorial For Beginners #45 - Validations in Reactive Forms In Angular, Angular Tutorials Validations in Reactive Forms In Angular, Angular Validations in Reactive Forms In Angular, Angular 9 Validations in Reactive Forms In Angular, Angular tutorial learn Validations in Reactive Forms In Angular, angular 9 Validations in Reactive Forms In Angular, angular Validations in Reactive Forms In Angular 6,7,8, 9, angular 8 example,
Angular 9 tutorial for beginners, angular 9 crash course, angular 9 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.
Install bootstrap angular tutorial, Learn how to install Bootstrap in Angular 9 app. In this course you will learn how to create small, medium, large applications with Angular 9 in this development tutorial.
Angular 9 Full Tutorial Playlist
• Angular 9 Tutorial For...

[@sreenuksr]

Angular 9 Tutorial For Beginners #45- Reactive Forms - Validations - Validations are an extremely important and integral part of any forms in apps - we use validations to prevent unwanted data or junk data - angular provides common validators like milLength, maxLength, required etc... - Angular maintains state information of the forms all the times - ng-touched, ng-untouched, ng-dirty, ng-pristine, ng-valid, ng-invalid - 3 Ways to perform validations in Angular reactive forms - Highlighting the errors - Disabling Submit button - Custom Field Level Validations - Import Validators into component file checkout.component.html Checkout Form - Using Reactive Forms Email Enter email Address Enter Valid email Address Quantity Enter Quantity Minmum Length Not Matched Checkbox Agree to Terms & Conditions Checkout checkout.component.ts import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-checkout', templateUrl: './checkout.component.html', styleUrls: ['./checkout.component.scss'] }) export class CheckoutComponent implements OnInit { // checkoutform: FormGroup; // constructor(private formBuilder: FormBuilder) { // this.checkoutform = formBuilder.group( // { // emailFld: new FormControl(), // qtyFld: new FormControl(), // trmChk: new FormControl() // } // ) // } checkoutform: FormGroup; constructor(private formBuilder: FormBuilder) { this.checkoutform = formBuilder.group( { emailFld: ['',[Validators.required,Validators.email]], qtyFld: ['',[Validators.required,Validators.minLength(5)]], trmChk: ['',Validators.requiredTrue] } ) } ngOnInit(): void { } postdata() { console.log(`Email Address: ` + this.checkoutform.value.emailFld); console.log(`Quantity: ` + this.checkoutform.value.qtyFld); console.log(`IsTermsChecked: ` + this.checkoutform.value.trmChk); } }

[@ARCTutorials]

Thanks for sharing the compilations. Regards Sridhar

[@amanuellebassi7294]

I don't have words. I am enjoying Angular. You made me love the course. You are second to none! Keep up the good work.

[@ARCTutorials]

So glad to hear that you are enjoying 👍

[@jacksm8709]

best of the best... am still following u and I av created my first web system just by following ur examples.. be blessed and thank you.

[@ARCTutorials]

Wow..awesome!!! Comments like these makes me so much happy and encourages me to bring even better content and tutorials for you. Thank you so much again Jacks. Regards Sridhar

[@rahulpathak906]

man outstanding and All your tut are amazing and wonderfull ..After waching the concept now i am very confident for Angular intriview else it was nightmare to work on project s without knowing concept no one can . thanks for the knowlege hub series and all hardwork ....

[@ARCTutorials]

I cannot tell you how happy i feel after seeing your encouraging words and comments. I will try to always give you the best tutorials 👍👍

[@amritachourasiya6720]

best of best so far

[@ARCTutorials]

Thanks Amrita for your kind words

[@Hgayashan]

One of the best angular tutorials available on youTube.

[@ARCTutorials]

Glad it was helpful!

[@kasperkat2004]

Thank you so much! Your course and method of teaching are excellent!!

[@ARCTutorials]

Thanks Kasper 👍

[@igorr4682]

it's worth mentioning that if you have more than one validator, the list of validators is array itself. For beginners it's easy to miss that.

[@robingusain6284]

really ;great stuff

[@iamhassell]

Another great tutorial - thank you!

[@ARCTutorials]

You're very welcome!

[@anuragsinha6135]

Lots of love Arc Tutorial 😀

[@ARCTutorials]

Hi Anurag. Do check out the Angular 10 series as well - with new examples and use cases kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@sonnysonny66]

Hi sir. do i need to do a reactive form validation and also a rest API validation? or only reactive form validation will do? A respond is greatly appreciated.

[@ARCTutorials]

We should always do validations in both sides. Both in Frontend and in backend APIs

[@sonnysonny66]

@@ARCTutorials thank you sir. really liking your videos

[@ritikchoudhary2433]

Hello sir, Could You tell us about what should be the approach to build an Angular Project example- Admin Dashboard, etc.

[@ARCTutorials]

Hi Ritik. I am currently doing Angular CRUD Tutorial series where we are building a project from scratch. Please the tutorial series and I am sure you will learn from scratch how to build apps.

[@ritikchoudhary2433]

@@ARCTutorials i m on #44 th tutorial , i ll surely check the crud tutorials Ty for that. I m able to understand the fundamentals very well and pretty sure others will do so😀 Thanks Sir

[@kasperkat2004]

A suggestion: in future videos use ctrl b and ctrl ` to free up space on your screen and hide unnecessary items on it.

[@ARCTutorials]

Thanks buddy. Will do in future tutorials 👍

[@pusarlaaishwarya5035]

seriously !!!! you made my work easy!!!!thanks a lot!!!!!! if possible make videos on react also

[@ARCTutorials]

Hi Aishwarya. Yes React JS videos also coming soon.

[@MrFuture-96]

Thank you so much sir for each great video

[@ARCTutorials]

Thank you 🙏

[@bhanuprakash2974]

sir in previous we have used formcontrol that is we have created an object for every field. now we are not using that but we are using validators.required. is the form builder builds those automatically?

[@ARCTutorials]

Hi Bhanu. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@bhanuprakash2974]

@@ARCTutorials thank you sir.. i will definitely follow you. And share your videos. But small request. Please have a look on ag grid.

[@SaiKumar-tg6ct]

Nice explanation, will you explain about Image File upload validation too

[@ARCTutorials]

Hi Sai. Yes i will cover it in Angular forms in Angular 10 series. Please follow Angular 10 series. kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@SaiKumar-tg6ct]

@@ARCTutorials Ok sure & thank you

[@SaiKumar-tg6ct]

@@ARCTutorials Ok sure & thank you

[@lewiswill3663]

Sir, i have a question. How to allow only checkbox is checked (without radio button). Thanks for this tutorial.

[@ARCTutorials]

Simple. Make sure the count of a variable is 1 and once its 1 disable all other checkboxes.

[@diyaaeddinechaali8208]

Amazing ! thanks a million sir

[@ARCTutorials]

Glad you liked it!

[@xtech5881]

I am using css part not scss part..and the input.ng-touched.ng-invalid is not working in css component..or hasError also..what will i do for this..i need validation in my project..

[@ARCTutorials]

Hi X Tech. Can you pls send me screenshot at [e-mail]

[@umadevicrips7888]

I have one doubt ji why we want to angular html css and js we can use in notepad also particular y we use angular for web development suddenly I got doubt in these... Please explain in detail..

[@1balwant]

Nice tutorial! What is error vs hasError?

[@ARCTutorials]

Hi Balmat. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@ashwinideveloper8207]

hi can i check the condition in reactive forms like < and >

[@avi8859]

Sir if you replace the formControl( ) by validator then how how data come in formControl????

[@ARCTutorials]

Hi Avi. Please follow Angular 10 reactive forms. I have covered a lot of use cases in detail. kzbin.info/www/bejne/iprLgqOKi7F4g8k

[@abhishekbagela7973]

Can't bind to 'ngIf' since it isn't a known property of 'span'.

[@ARCTutorials]

Hi. Can u pls post ur code here pls?

[@96FROZEN]

Hi I have a small question: The email validator appears to take incomplete addresses such as peter@pan (missing the last part of a domain, like .com, .net etc...). How would one go about validating fields in that style? Thanks

[@96FROZEN]

Please forget the question, in case someone else was curious about the same thing: Basically emails do not require a top level domain (e.g : .com, .net, .co.uk), these are perfectly valid, however if you want to verify if the email address has a top level domain, you can use the following: apply Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")]). If you're not familiar with this, this is regex (short for [reg]ular [ex]pression), it's quite common to use it as a way to validate if input is according to what you're expecting.

[@ARCTutorials]

We have had another user ask a similar question. Glad you shared your knowledge. Thanks Pedro. Cheers. Happy Learning

[@ashwini6804]

how many tutorials i learned to get clarity on angular???

[@ARCTutorials]

Are you not getting clarity or facing problems in learning Angular in my series?

[@ashwini6804]

Getting clarity ..and how videos out of 97 to get some knowledge on that

[@ashwini6804]

Sorry how many

[@ARCTutorials]

@@ashwini6804 if yo ucover around 70 tutorials you would master Angular. Remaining 20 are project work

[@vivekrampelly6435]

i am watching each and every class of your tutorial is completly awesome .can you please share the notes sir

[@ARCTutorials]

Hi vivek. Can u pls send email at [e-mail]

[@jacksm8709]

just a by the way,am getting this error on my web console." core.js:6228 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." where should I look?

[@ARCTutorials]

Hi Jacks. Most probably you are binding data which is an Object. Instead use like this object.name where name is the key in the object.

[@jacksm8709]

will check thanks for the reply@@ARCTutorials

[@jacksm8709]

i av 2 questions 1. I have two input boxes and I want both to have the same data enter e.g password and confirm password boxes. how can I validate data on the form without leaving the form? 2. if I want my form to have more than two buttons e.g update and delete buttons and the has a submit().

[@ARCTutorials]

Hi Jacks. We can do a (blur) method on both form controls and then check if the values are same if yes, proceed. If not, show validation error. Try it out else I will try and create a quick fix tutorial

[@jacksm8709]

i tried this and it works but the form is still valid Please Enter Password

[@anandparmar5068]

Good morning sir

[@ARCTutorials]

Hi Anand. Had some issues with internet connection. Sorry for late reply

[@subhashmunnaluri]

i have been getting error near hasError after compling. any solution

[@subhashmunnaluri]

it shows object is null

[@ARCTutorials]

Hi Subhash. Please send me code snippet and error screenshot at [e-mail]

[@subhashmunnaluri]

@@ARCTutorials thanks for replying. I have found the solution. Thanks for your time.

[@harshit9900]

Sir in browser html page is running but cant apply validation in that even it show no error

[@ARCTutorials]

Hi Harshit. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@shivangijain9181]

Enter email address. It gives error on the conditions : touched and hasError Error says, "Object is possibly null". Can you please solve this?

[@ARCTutorials]

Hi Shivangi. Are you following exactly I showed? if yes and still see the error, drop me an email at [e-mail] and i will send you updated code

[@Sachin-qk3uo]

getting the same error...did you get the updated code?? if so please send me the updated code

[@ashekseum9301]

Use this: Enter Email Address

[@jacksm8709]

why am i getting this error, tried all sort of things. Cannot read property 'touched' of null my code is Please Enter Other Names its not firing at all..

[@ARCTutorials]

Hi jacks haserror should be small case. U have written it wrong. Pls try correcting it again. Thanks Sridhar

[@ARCTutorials]

Check for spelling for the form name and form control name

[@jacksm8709]

thanks i have checks and truly had misspelled then.. tanks

[@jacksm8709]

sorry for misspelling and have not splept..

[@mithileshpandey9885]

i need video for using nested formgroup in reactiveform

[@ARCTutorials]

Hi Mithilesh. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@soulsscience2198]

.hasError() is not working bro is throws error like object like possible null

[@muralikrishna8133]

this is new addition to the latest angular - checkoutForm.controls['emailField'].touched && checkoutForm.controls['emailField'].errors?.required.

[@soulsscience2198]

@@muralikrishna8133 got it bro thanku

[@mohamedibrahimabdulghani5514]

i have error when i use { *ngIf="checkoutform.get('Name').hasError('required') "} can you help me !