Building Forms in Angular Apps | Mosh

🔥Get the COMPLETE COURSE (60% OFF - LIMITED TIME): programmingwithmosh.com/cours...
Learn to build forms with validation in your Angular apps.
TABLE OF CONTENT
00:00 Introduction
00:26 Building a Bootstrap Form
04:32 Types of Forms
07:54 ngModel
13:24 Adding Validation
16:43 Specific Validation Errors
21:03 Styling Invalid Input Fields
22:30 Cleaner Templates
RELATED VIDEOS
Angular 4 Tutorial for Beginners
• Angular Tutorial for B...
Angular Version History
• AngularJS vs Angular 2...
Angular Material
• Angular Material Tutor...
Angular Animations
• Angular Animations Tut...
MY OTHER COURSES
I have several other courses on web and mobile application development. You can find them all here:
programmingwithmosh.com/courses
STAY IN TOUCH
/ programmingwithmosh
/ moshhamedani

[@sahil-bawa]

As a newbie to Angular, I tried watching multiple videos on Reactive vs Template-driven forms. This was the only video whose explanation and use of graphics finally made it click in my head. Thank you Mosh! Don't know why I even bothered looking elsewhere for learning Angular Forms.

[@sanmani7781]

Thank you Brother. This video helped me to learn the angular form very easily. God Bless You.

[@bubamanjang]

Your efforts in making these amazing videos is highly appreciated. Thank you so much!

[@rjconnolly]

You are my hero - coming from an HTML PHP environment this is helping me out so much!!! THANK YOU!

[@NourLababidi]

Thank you very much. The speed is perfect and the instructions are clear . One of the best. Thank you!

[@julioblancas706]

Thank you for sharing your time and knowledge with the people loves learn. Congratulations!.

[@grazielesilva5306]

Thank you for share some knowledge and spend some time doing that kind of content for the community! Bless you.

[@ananthuvenugopal9655]

This is one of the finest tutorial about forms in angular. Explained everything crystal clear. Thank you so much 🙏

[@soundariyab206]

Amazing and very helpful video, as I am a beginner in angular so this video is very helpful to clear basic things related to angular form and controls.
Thank you Mosh for this video and please try to make some more videos on angular basics especially for beginners.

[@1000lino]

Clear and concises explainations make the subjet so much easier to understand
Thank you so much!

[@rjbirelly1]

Thank you Mosh. Your videos are amazing and very easy to understand the concepts.

[@yogeshcaptain]

that's wonderful and so easy to understand. Thanks a lot Mosh :)

[@someshnukala804]

One of the greatest Technical Teachers in the world. Mosh sir! Thank you so much sir. Hats off

[@breakingcode92]

Thanks so much for making this video.. Honestly it was such a good help. I'll link you when I'm done with the site I'm working on :D

[@elenegulordava1868]

Thank for your detailed, great explanations, it's an amazing work!

[@hussain5755]

I can never thank you enough you have restored my faith in humanity Love you man. Please keep making these awesome videos with the amazing explanation of theory and the code along solutions thanks again

[@davooddehghan65]

Thank You man
great tutorial
it's an amazing work!

[@khizer3528]

Excellent 🔥🔥 Thank you for this tutorial .

[@noname-bh1os]

Well explained. thanks a lot Mosh!!

[@ledspbr]

Puts... Este cara é muito bom
This guy is greeeat teacher

[@santoshsingh6404]

Many Thanks for such an awesome videos. Thanks a Ton Sir!!!!

[@jasminem360]

you are really good at explaining ! help me a lot!

[@anandbmuley]

I like the part and the thought process behind code formatting. You should always treat the code as an art too and not only science👍

[@nareshgoud1905]

Great video Mr.Mosh. thank you very much

[@dominiccampese2159]

This is exactly the explanation I was looking for great content

[@manjunathrajure2257]

This helped a lot to understand angular forms in simpler way.

[@sample1801]

Thank you mosh !
This video explained me easier !

[@jamaluddinmondal9276]

Thanks for giving a clean explanation ,👌
You may use Prettier extension on Vs Code automatically every property will be shown line by line

[@ErayTonyali]

Thanks for your amazing tutorial!

[@m.m.farhad5292]

Can not thank you enough Mosh, lifesaver.

[@SushilSharma-po6ur]

Such a nice video helping to easily create an angular form

[@marekkazimierczak9210]

You are amazing teacher, Mosh! 🏆

[@journeyofadigitalartist5021]

you made this easy to understand, I will still watch it again , though

[@soultouchingsongs]

You are the best👍. It helped me a lot.. Thank u..

[@romankostiuk]

Good lesson for beginers... thanks!

[@nashrampy]

Thank You Mosh!

[@Shiva-zy7jq]

Thank you Mosh for the video.

[@ShruthiVeda]

I must share my feedback about this video. Content is very easily understandable. I tried many other videos to understand how these formCcntrol and formGroup works. I failed many times to ans properly in interview. But this video made concept clear to me. Thanks a lot.

[@raghubsrinivas6025]

Thank you for this Information.

[@williamsbron2686]

that was great Mosh
it helps me a lot
really really really really thank you Mosh😍😍😍😍😍

[@bigsmall99]

Excellent instruction.

[@objectObject212]

Great tutorial, thanks.

[@mathieufabre7194]

really good video, good sound, good voice, and goos explanations. a f****ing good work !

[@slays6916]

awesome job man!

[@irohits4019]

Its a great help..Thanks

[@mahilkr]

Very nice, great presentation.

[@farhangmdc]

Great Explanation 😇

[@7Rainbows]

Thank you so much Mosh

[@ericwilfriedettien4603]

Thank you very much !

[@SushilSharma-po6ur]

Thanks a lot Mosh

[@Alejandra_Mar]

Great video, thanks.

[@user-zi3gc2pg5s]

thanks a lot .It is awesome

[@bilelmaaloul7850]

thanks for the effort

[@bmulamba6685]

this is awersome thank you

[@priyeshprince2318]

Thanks Mr tutor

[@alyaaabou_elhamd1331]

thank you so much .. i need a reactive form video please

[@asifaasi918]

tnQ Mr.Mosh

[@MomLifeJournal]

Thank you so much

[@maximrunix]

sos un groso , gracias , me salvaste la vida

[@faisalmushtaq6008]

An excellent tutorial indedd

[@yt1234567100]

thanks.. good jobs

[@guyr989]

Great video!
But how do you clean all the alerts after you 'unFoucused'?
and how to add a confirm submission massage?

[@MrTryten]

The besting about your teaching is that you advise on the use case scenarios…. That is a great way to learn…. Thanks

[@hassanaguezoum3477]

Thank you ❤

[@danishchief1078]

From anyone who gets an error "There is no directive with "exportAs" set to "ngModel"" you should:
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@NgModule({
imports: [
BrowserModule,
FormsModule, //

[@saivaruntangalla2279]

Do we need it import it in component.ts file

[@bilalnizamani7447]

I have the same problem.

[@SapreShreyas]

thanks man! add this in app.module.ts

[@TheDruzzila]

i love your face so much and i dont know even how you look like

[@hafsadolly6830]

Where we should do this?

[@cvchanel4763]

Thank you verry much :)

[@weezySKLH]

Dude you are the best

[@skilljourney6357]

r u great teacher.

[@amahrizal]

Many thanks

[@alaamoustafa7991]

you are perfect !

[@sharathkp2310]

nice class

[@benjaminperez6777]

exelente video

[@AdityaKumar-cy2cr]

Thank you

[@agustinbcu]

Great video, but the way awesome t-shirt.

[@jagadeeshkalugotla]

Actually i was struggled a lot for form validating but trust me this is the one of the best tutorial ----->Jagadeesh

[@rickys3481]

This is the best

[@ScienceSeekho]

Your the best please upload all courses on udemy I am ready to pay

[@ASouza-ut9kb]

Much better then oficial site!

[@MrAmrmnabil]

Thanks

[@OPSergio88]

damn..., your content is great! i would love to know more english so i can understand you better :P

[@charliemccharlie]

In the most recent versions of Angular you might get errors that one of these validation properties might be null. In such a case, you can use a safe navigation operator such as this: *ngIf="firstName.errors?.['required']"

[@SureshBabu-pz5ks]

HI Mosh, Iam getting the Error: No value accessor for form control with name: 'firstName'
plz let me know how to fix

[@RandomNiceThings12]

great video

[@aswininayak5877]

Awesome 👏 I am struggling to set the default values for a multi select drop down. Mat select. Could you please share 1 example

[@neko_senpaianimeamvedits9598]

Nice ❤

[@ezzabuzaid]

You're great

[@aoam9194]

I like your videos.
Thanks alot mosh 😃

[@tejpalsingh294]

حسبي الله لا اله الا هو الحي القيوم ggghhtt ho ki hi

[@aoam9194]

Tejpal Singh
😒
I don't understand this language

[@tonynguyendtn1984]

would you ever consider updating your courses for Angular 7?

[@13Macke37]

How do I create a "username taken" check? What is the best way? I want the validation to appear when the user is typing

[@ramuk9570]

use full of the beginners

[@EldarKhaitov]

Why my controls are invisible on nested form?
I have one master form and insert nested form with components. The nested forms are invisible.

[@danielaregawi]

Thank you so for sharing this video!! What's the editor you we're working on?? I love how it simply generates the markup can you please share how I can use it too?

[@jamaluddinmondal9276]

Vs Code Editor by Microsoft

[@purshotham91]

Seriously your tutorial was very helpful for me. But you didn't mention about submit button validation. Can you help me with that?

[@hk_build]

asume dom elements [a,b..y,z] and there is change for elem => z now react dom changes only =>z BUT how its in angular will it rerender all [a to z] ..?

[@manishankar8688]

i cannot see metadata of ngmodel drictive in the development tool. what is need to done to see metadata example details of ng_module.

[@tamiltechgeek4399]

how to add js file to angular html component.I am able to link normal html file to a js file using script tag and run in node.js but unable to do same in angular component.Please help.

[@SzigSag]

Hy there,...
i was wondering why im getting the ERROR TypeError: Cannot read property 'required' of null! Been already on stackoverflow and the angular docs but no solution could help me get rid of that problem! You guys have any solutions for me? ;)
btw... visual studio gives me that error message aswell: Identifier 'required' is not defined. '__type' does not contain such a member

[@prayagparikh8020]

It's showing same error for me. What's the solution?

[@abderazzakmnaimoutaanni1763]

Hello,
Thanks for the awesome video,
I just want to add that on Angular10, the firstName.errors object can be NULL, so you need to use the safe navigation operator ?
*ngIf="firstName.errors?.required"
regards

[@aviralgoel2841]

And now in 2022 use
*ngIf="firstName.errors?.['required']"

[@arunkumars9452]

Sir, I try to bought a course through the link in a description but it shows your account is missing payment method. Some told, if the seller wouldn't accept my payment method, this will happen. What can I do next?

[@jainshilpi3]

I am getting this error
There is no directive with "exportAs" set to "ngModel" ("ass="form-group">
Name:
]#firstName="ngModel" (change)="log(firstName)" type="text" class="form-control" id="firstName"/>

[@joaovitorfernandes8201]

stackoverflow.com/questions/38648407/angular2-error-there-is-no-directive-with-exportas-set-to-ngform

[@bishoywagih9663]

you have to add the validation rule in input filed.. so change the input field from ]#firstName="ngModel" (change)="log(firstName)" type="text" class="form-control" id="firstName"/> to ]#firstName="ngModel" (change)="log(firstName)" type="text" class="form-control" id="firstName"/>

[@amaanimtiyaz]

For those whom are looking for the same:
1.Go to app.module.ts
2.Paste - import {FormsModule} from '@angular/forms' ;
3. In "Imports" section down there: write FormModule eg: imports: [
BrowserModule,
FormsModule
]

[@petarjovanovic8524]

Did you solve that problem ,cuz I got the same ? Thanks!