Building Forms in Angular Apps | Mosh

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.

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

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.

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

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, //

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👍

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

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

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

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

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

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

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

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

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

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

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

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

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

Excellent 🔥🔥 Thank you for this tutorial .

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.

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

Good lesson for beginers... thanks!

Such a nice video helping to easily create an angular form

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

would you ever consider updating your courses for Angular 7?

Thanks for your amazing tutorial!

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

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

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

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

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?

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

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

Well explained. thanks a lot Mosh!!

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

Thank you mosh !
This video explained me easier !

Hello Mosh, thanks for the video, however adding the ngModel reference directive '#firstName= "ngModel"' for the input validation is not working rather taking everything off the page and leaving it blank and if i remove it, the page will show the form again. i've troubleshoot it to no avail
do you know what might be the problem pls

Excellent instruction.

Great video Mr.Mosh. thank you very much

Great tutorial, thanks.

MUITO BOM

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

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

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

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

Very nice, great presentation.

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

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?

is there any video for reactive forms??

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

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

Great video, thanks.

awesome job man!

This tutorial did not talk how to validate the form element, just validate each control, and not sure how to disable a button if the entire form is not valid, please add more details

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"/>

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

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

thanks a lot .It is awesome

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

How do you access the ngModel object from the browser console?

Can i use google drive for my form storage ?

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

I like your videos.
Thanks alot mosh 😃

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] ..?

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

can you help me fixing this error, please
There is no directive with "exportAs" set to "ngForm" ("]#f="ngForm" (ngSubmit)="submit(f)">
I got this error with all form directives (ngForm, ngModel, ngModelGroup)

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

how to get field line such as lable+input press tab please tell about the extension or methods?

Thank you Mosh for the video.

Its a great help..Thanks

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

very use full but i need how to post form and save in data base ..can you explain it please.

Thank you for this Information.

sos un groso , gracias , me salvaste la vida

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"/>

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

You will get this error: TS2531: Object is possibly 'null'.
Solve this by this solution:
go to tsconfig.json and add "strictNullChecks":false

Thank you very much !

Thank you ❤

An excellent tutorial indedd

I think this video should change getting error There is no directive with "exportAs" set to "ngModel" need to add FormsModule in the app Module import.

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.

you are perfect !

Help...I am getting this error
"contact-form is a not a known element"
[ERROR->]

Thank you verry much :)

Thanks a lot Mosh

Thank You Mosh!

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

ERROR in src/app/admin/form/form.component.html:36:29 - error NG8003: No directive found with exportAs 'ngModel'.

36 #firstName="ngModel"

Thank you so much Mosh

this is awersome thank you

at 4:33 are you using css??

thanks.. good jobs

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

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

Thanks Mr tutor

You're great

Thank you so much

The validation is nice, but once I have to do it all again in the server, it is not that awesome...