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.
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 ngForm directive is provided by Angular FormsModule. So for us to be able to use it, we will have to import the FormsModule in our AppModule file (app.module.ts). So please make sure to include the following import statement. Also include “FormsModule” in the imports array of @NgModule decorator.
import { FormsModule } from ‘@angular/forms’;
If “FormsModule” is not imported you will see the following error in the browser developer tools
there is no directive with exportas set to ngform
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
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
