Angular forms tutorial

In Part 2 of Angular CRUD tutorial, we discussed performing the READ operation. In this video and in the next few videos we will discuss performing the CREATE operation. To understand the CREATE operation, let us build a form that help us create a new employee. For this we will use the createEmployee component that we already created in one of our previous videos in this series.
Along the way, we will also discuss performing validation and displaying meaningful error messages to the user.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

There are 2 ways to create forms in Angular
1. Template Driven Forms
2. Model Driven Forms (Commonly called Reactive Forms)

Both these approaches have their own pros and cons. For example, Template Driven forms are generally used to create simple forms. On the other hand, Reactive forms are used to create complex forms. For example, if you want to add form controls dynamically or perform cross-field validation we use the Reactive forms approach. There are several other differences, between Template driven and Reactive forms. We will discuss those differences in detail, in a later video.

In this video, we will use the Template driven approach to build the "Create Employee" form. As the name implies, template driven forms are heavy on the template. This means we do most of the work in the view template of the component.

Design "Create Employee" form. To keep this simple, at the moment we only have 2 fields (Full Name & Email). We will add the other fields like Gender, Department, Phone Number etc.. later. Also, at the moment, we only have textboxes on our form. In our upcoming videos we will discuss working with radio buttons, checkbox, dropdownlist etc

For the form HTML, please refer to our blog using the below link.

Code Explanation:
We are using Bootstrap CSS classes like panel, panel-primary, panel-heading, panel-title etc to style the form. There is no Angular here. If you are new to bootstrap, please click here to check out our Bootstrap tutorial using the following link

Consider the following line of code
[form #employeeForm="ngForm" (ngSubmit)="saveEmployee(employeeForm)"]

#employeeForm is called the template reference variable. Notice we have assigned "ngForm" as the value for the template reference variable employeeForm. So employeeForm variable holds a reference to the form. When Angular sees a form tag, it automatically attaches the ngForm directive to it. The ngForm directive supplements the form element with additional features. It holds all the form controls that we create with ngModel directive and name attribute, and monitors their properties like value, dirty, touched, valid etc. The form also has all these properties. We will discuss these properties at the individual control level and at the form level in detail in our upcoming videos.

The ngSubmit directive submits the form when we hit the enter key or when we click the Submit button. When the form is submitted, saveEmployee() method is called and we are passing it the employeeForm. We do not have this method yet. We will create it in the component class in just a bit.

The ngModel directive is used for creating two-way data binding i.e to keep the HTML element value and it's corresponding component property in sync. We discussed two-way data binding in detail in our Angular 2 course. Use the link below to watch two-way data binding video.

Text version of the video

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[ahmedalshora]

for errors simply use ngModel only like
<input id="fullName" type="text" ngModel class="form-control" name="fullName" >

[DecentProgrammer]

Best tutorial for angular in the internet :)

[jenithjana]

if you get this error
Property 'fullName' does not exist on type 'CreateEmployeeComponent'
Property 'email' does not exist on type 'CreateEmployeeComponent'
then include these two property in CreateEmployeeComponent
fullName: string;
email:string;

[samadhansalgar]

No words to appriciate sir, Thanks for wonderfull videos

[ibrahimMarzaq]

Interesting. Easy. Clear. detailed. Thank you very much.

[AbhishekPandey-gwxx]

best tutorial .u have explained it very well.indeed angular crud has been explained by u in detail nd very well. thank u

[HassanKhan-geik]

Great tutorial Venkat Sir. In the video you talked by reactiveforms but i cant find any video on reactiveforms in your list. Please add. Thanks in advance !

[saurabhchauhan]

Please add one file upload control as well so it can be much helpful sir.

[SweetMemories]

Without declaring a property in component, two-way binding is not working in angular 9, giving error r as property 'fullName' not exist in component. Thanks in advance

[someshravi]

best video tutorials ever watched.thanks....

[sourishdutta]

what is the difference between @viewchild vs @viewchildren and why we need this and full concept about observable and how it helps to make code asynchronous ?! Thank you sir.Please discuss to this topics sir.😊

[MotionInMotion]

Hello Kudvenkat. Your videos are invaluable. Thanks so much. Im having an issue displaying for form value. I always get [object Object]. Any idea of what may be wrong?Thanks.

[ievgengolskov]

Webstorm shows me mistake on [(ngModel)]="fullName" and demands to add property fullName to component.ts. but in your code it looks like everything is fine. can't figure out why is it so

[kiran]

error:
<input id="name" name="name" [(ngModel)]="name" type="text" class="form-control">
Property 'name' does not exist on type 'CreateContactComponent'

[santoshkumar-vm]

Hello sir. Thanku for nice tutorial.
Sir please can you provide reactive form tutorial with all the fields in this form.

Plz provide any tutorial on reactive form.thanks in advance.

[gvsprakashrao]

Hello Sir, I am getting the error below though I am using the same code as you instructed in the video and blog.

[arunisk]

Hi sir,
Can you please provide videos for reactive form.

[prakashgunjari]

Hello Sir I am getting this error property fullName does not exist on type 'createEmployeeComponent', The application runs the first time even with the errors, but if I restart the PC the application does not work and the errors are still there, is it something related to caching, if so how should I solve it

[Asivakumar]

hai venkat. please make a video on PWS offline service in angular5. so many interviewrs asking that.

[umairhafeez]

hi
i am a beginner on angular
and i found difficult...
so, can you please guide me, from where should I start angular!