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.

[@m.m.farhad5292]

Can not thank you enough Mosh, lifesaver.

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

[@dominiccampese2159]

This is exactly the explanation I was looking for great content

[@someshnukala804]

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

[@NourLababidi]

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

[@marekkazimierczak9210]

You are amazing teacher, Mosh! 🏆

[@williamsbron2686]

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

[@Vedase26]

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.

[@sample1801]

Thank you mosh ! This video explained me easier !

[@yogeshcaptain]

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

[@jasminem360]

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

[@manjunathrajure2257]

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

[@farhangmdc]

Great Explanation 😇

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

[@rjbirelly1]

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

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

[@julioblancas706]

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

[@nashrampy]

Thank You Mosh!

[@grazielesilva5306]

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

[@jamaluddinmondal9276]

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

[@1000lino]

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

[@premiuminstituteofexcellen9035]

For Angular 13 use this statement First Name Required

[@noname-bh1os]

Well explained. thanks a lot Mosh!!

[@ledspbr]

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

[@khizer3528]

Excellent 🔥🔥 Thank you for this tutorial .

[@bigsmall99]

Excellent instruction.

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

[@romankostiuk]

Good lesson for beginers... thanks!

[@soultouchingsongs]

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

[@Shiva-zy7jq]

Thank you Mosh for the video.

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

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

[@objectObject212]

Great tutorial, thanks.

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

[@7Rainbows]

Thank you so much Mosh

[@irohits3314]

Its a great help..Thanks

[@mahilkr]

Very nice, great presentation.

[@journeyofadigitalartist5021]

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

[@mathieufabre7194]

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

[@ScienceSeekho]

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

[@nareshgoud1905]

Great video Mr.Mosh. thank you very much

[@davooddehghan65]

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

[@asifaasi918]

tnQ Mr.Mosh

[@santoshsingh6404]

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

[@maximrunix]

sos un groso , gracias , me salvaste la vida

[@aoam9194]

I like your videos. Thanks alot mosh 😃

[@tejpalsingh294]

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

[@aoam9194]

Tejpal Singh 😒 I don't understand this language

[@ErayTonyali]

Thanks for your amazing tutorial!

[@MrTryten]

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

[@bmulamba6685]

this is awersome thank you

[@ASouza-ut9kb]

Much better then oficial site!

[@slays6916]

awesome job man!

[@bilelmaaloul7850]

thanks for the effort

[@priyeshprince2318]

Thanks Mr tutor

[@raghubsrinivas6025]

Thank you for this Information.

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

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

[@akfsf00543]

Angualr 17:- Time10:28 #firstName="ngModel" error NG8003: No directive found with exportAs 'ngModel'. [plugin angular-compiler]

[@ericwilfriedettien4603]

Thank you very much !

[@jagadeeshkalugotla]

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

[@faisalmushtaq6008]

An excellent tutorial indedd

[@skilljourney6357]

r u great teacher.

[@ale_lunalili]

Great video, thanks.

[@tonynguyendtn1984]

would you ever consider updating your courses for Angular 7?

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

[@sharathkp2310]

nice class

[@weezySKLH]

Dude you are the best

[@SushilSharma-po6ur]

Thanks a lot Mosh

[@alyaaabou_elhamd1331]

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

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

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

[@rickys3481]

This is the best

[@ramuk9570]

use full of the beginners

[@JavedOnBike]

#firstName="ngModel" is not working for me. instead I have to use firstName="ngModel". but unable to use firstName in validation

[@savezmomin1647]

i was also having problem with that thank you brother

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

[@SalmanManzoorGorssi]

at 4:33 are you using css??

[@RandomNiceThings12]

great video

[@agustinbcu]

Great video, but the way awesome t-shirt.

[@jainshilpi3]

I m getting below 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"/>

[@bilalafridi5326]

got to app.module.ts and import form module.. like this: import { FormsModule } from '@angular/forms'; and then add it to the below @NgModule imports like this: imports: [ BrowserModule, FormsModule ],

[@bilalafridi5326]

you might have solved this but it could help others.

[@muralinaidu1059]

even after doing this. it didnt work

[@madhusudhan9096]

yes its working

[@annusunny]

for variable #firstName use varFirstName or _firstName | In short here ngModel name and variable name should not be same.

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

[@cvchanel4763]

Thank you verry much :)

[@neko_senpaianimeamvedits9598]

Nice ❤

[@hassanaguezoum3477]

Thank you ❤

[@amahrizal]

Many thanks

[@srujithraoambati4042]

Sir, I got an error that displayed "no directive found with exportAs ngModel". Can you please help me out?

[@lucaslemos1977]

Srujith Rao Ambati in your appmodule.ts import NgModule and FormsModule, if you not imported yet

[@srujithraoambati4042]

@@lucaslemos1977 I did that but still got the error

[@nexopos3310]

I got an issue... with the template variable (#formName). Returns There is no directive with "exportAs" set to "ngModel"

[@greysonyee4700]

same issue here, both FormModule and ReactiveFormModule is imported. Please help.

[@cardflopper3307]

don't forget the "s", it is FormsModule, not FormModule

[@purshotham91]

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

[@arjunsunny999]

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

[@benjaminperez6777]

exelente video

[@alaamoustafa7991]

you are perfect !

[@cachkiemtienonlinetainha]

Thank you so much

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

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

thanks a lot .It is awesome

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

[@SureshBabu-pz5ks]

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

[@guyr989]

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