Building Forms in Angular Apps | Mosh

[@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.

[@rjconnolly]

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

[@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!

[@ananthuvenugopal9655]

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

[@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.

[@NourLababidi]

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

[@someshnukala804]

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

[@jamaluddinmondal9276]

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

[@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?

[@m.m.farhad5292]

Can not thank you enough Mosh, lifesaver.

[@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!

[@julioblancas706]

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

[@dominiccampese2159]

This is exactly the explanation I was looking for great content

[@manjunathrajure2257]

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

[@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

[@marekkazimierczak9210]

You are amazing teacher, Mosh! 🏆

[@sample1801]

Thank you mosh ! This video explained me easier !

[@rjbirelly1]

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

[@premiuminstituteofexcellen9035]

For Angular 13 use this statement First Name Required

[@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']"

[@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👍

[@grazielesilva5306]

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

[@williamsbron2686]

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

[@MrTryten]

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

[@jasminem360]

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

[@farhangmdc]

Great Explanation 😇

[@yogeshcaptain]

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

[@ScienceSeekho]

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

[@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

[@nashrampy]

Thank You Mosh!

[@bigsmall99]

Excellent instruction.

[@romankostiuk]

Good lesson for beginers... thanks!

[@tonynguyendtn1984]

would you ever consider updating your courses for Angular 7?

[@priyeshprince2318]

Thanks Mr tutor

[@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']"

[@irohits4019]

Its a great help..Thanks

[@soultouchingsongs]

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

[@bilelmaaloul7850]

thanks for the effort

[@noname-bh1os]

Well explained. thanks a lot Mosh!!

[@objectObject212]

Great tutorial, thanks.

[@khizer3528]

Excellent 🔥🔥 Thank you for this tutorial .

[@asifaasi918]

tnQ Mr.Mosh

[@rahulmathew8713]

U can do mvvm in angular you dont need reactive form and other crap. You decide your architecture the framework should not decide for you. And unlike react , you don't need to write html inside javascript. So there is clear separation of concern. View is not responsible for checking business logic , its business model job to do that and let the view know about how to present the data via viewmodel. Just create a viemodel and bind that to the view. Do data transformation logic and data validation inside a business model. Inject the business model to view model via the constructor. inject the dataservice api layer to model via constructor. If you need to call component B from component A, just expose an interface and let A create a viewmodel by inheriting from that interface and pass an instance of that viewmodel as a property binding to B. Thats it. Angular clearly simplifies the architecture and lets your write decoupled manageable application. Period.

[@journeyofadigitalartist5021]

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

[@Shiva-zy7jq]

Thank you Mosh for the video.

[@mathieufabre7194]

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

[@ledspbr]

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

[@alyaaabou_elhamd1331]

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

[@jagadeeshkalugotla]

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

[@mahilkr]

Very nice, great presentation.

[@bmulamba6685]

this is awersome thank you

[@skilljourney6357]

r u great teacher.

[@ASouza-ut9kb]

Much better then oficial site!

[@sharathkp2310]

nice class

[@purshotham91]

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

[@7Rainbows]

Thank you so much Mosh

[@AdityaKumar-cy2cr]

Thank you

[@nareshgoud1905]

Great video Mr.Mosh. thank you very much

[@davooddehghan65]

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

[@ramuk9570]

use full of the beginners

[@santoshsingh6404]

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

[@ericwilfriedettien4603]

Thank you very much !

[@MrAmrmnabil]

Thanks

[@SushilSharma-po6ur]

Such a nice video helping to easily create an angular form

[@elenegulordava1868]

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

[@raghubsrinivas6025]

Thank you for this Information.

[@ErayTonyali]

Thanks for your amazing tutorial!

[@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

[@aoam9194]

I like your videos. Thanks alot mosh 😃

[@tejpalsingh294]

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

[@aoam9194]

Tejpal Singh 😒 I don't understand this language

[@benjaminperez6777]

exelente video

[@maximrunix]

sos un groso , gracias , me salvaste la vida

[@adityachoudhari2182]

people watching this video now , use prettier or beautify extensions , for clean templates instead of hardcoding lines.

[@amahrizal]

Many thanks

[@rickys3481]

This is the best

[@faisalmushtaq6008]

An excellent tutorial indedd

[@ale_lunalili]

Great video, thanks.

[@cachkiemtienonlinetainha]

Thank you so much

[@slays6916]

awesome job man!

[@cvchanel4763]

Thank you verry much :)

[@hassanaguezoum3477]

Thank you ❤

[@agustinbcu]

Great video, but the way awesome t-shirt.

[@SushilSharma-po6ur]

Thanks a lot Mosh

[@RandomNiceThings12]

great video

[@weezySKLH]

Dude you are the best

[@guyr989]

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

[@alaamoustafa7991]

you are perfect !

[@leratomphahlele1908]

in the beginning of the video you said you will show us how to make submit button active when all fields are valid???

[@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!

[@علياءاسامه-ت4م]

thanks a lot .It is awesome

[@arjunsunny999]

Yoy are great.. ty,,,,,,,Where d o i get this code????

[@kaushikdas1366]

Thanks for the tutorial Object is possibly 'null'. -> did anyone getting this error.after adding individual validations.

[@yt1234567100]

thanks.. good jobs

[@rajiraji-qd8bo]

bootstrap styles not working like alert alert-danger in

[@choonsenglim7387]

raji raji ya....i faced the same problem as well....do u have any idea why?

[@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?

[@neko_senpaianimeamvedits9598]

Nice ❤

[@Me.anything]

You didn't explain how bootstrap css class was being applied on form? For me classes are not being applied?

[@proxy5061]

hey i am also stuck there plz let me know how to use boot strap

[@robertoradu9965]

add this to yor code

[@airor4]

6 months late but you can add the bootstrap.min.css relative path to your angular.json styles property which will give you global access to bootstrap. Or I think you can link it in the stylesUrl attribute within the component decorator within the ts file. Or you could do what @Roberto Radu said and link it directly within the html.

[@estebansepulveda5407]

@@robertoradu9965 thanks buddy! This should be added to the html file. Though I still dont see the red alert when the error pops up

[@abderazzakmnaimoutaanni1763]

install bootstrap by executing the cmd npm install --save bootstrap then go to angular.json file and add on "styles" : "node_modules/bootstrap/dist/css/bootstrap.css",

[@SandyUndefinedVlogs]

is there any video for reactive forms??

[@ezzabuzaid]

You're great