Sql server, .net and c# video tutorial: 2017

Suggested Videos
Part 3 - Angular routing and navigation | Text | Slides
Part 4 - Angular base href | Text | Slides
Part 5 - Angular forms tutorial | Text | Slides

In this video we will discuss working with radio buttons in Angular Template Driven forms.

We want to include "Gender" radio buttons in the Create Employee form as shown below. When we select employee "Gender" using the radio buttons, the selected gender value should reflect in the Angular generated form model as shown in the image below. Also, we we click the "Save" button we want the selected gender value to be logged to the console.
bootstrap radio buttons in Angular

To achieve this all you have to do is include the following HTML in create-employee.component.html file

<label>Gender</label>

Male

</label>

Female

</label>

</div>

Code Explanation

The name attribute is required to group the radio buttons as one unit and make the selection mutually exclusive. Make sure both the radio buttons have the same value for the "name" attribute. Otherwise the radio button selection won't be mutually exclusive.
It is also important that you set the "value" attribute for each radio button. This value is posted to the server when the form is submitted.

While we are here, let's also include a textbox to capture "Phone Number" and "Contact Preference" radio button. So the form should now look as as shown below.

For your referece, here is the complete HTML in create-employee.component.html

<h3 class="panel-title">Create Employee</h3>

</div>

<input id="fullName" type="text" class="form-control" name="fullName"

[(ngModel)]="fullName">

</div>

<label for="email">Email</label>

<input id="email" type="text" class="form-control" name="email"

[(ngModel)]="email">

</div>

<label for="phoneNumber">Phone Number</label>

<input id="phoneNumber" type="text" class="form-control" name="phoneNumber"

[(ngModel)]="phoneNumber">

</div>

<label>Contact Preference</label>

<input type="radio" name="contactPreference" value="email"

[(ngModel)]="contactPreference">

</label>

<input type="radio" name="contactPreference" value="phone"

[(ngModel)]="contactPreference">

Phone

</label>

</div>

<label>Gender</label>

Male

</label>

Female

</label>

</div>

</div>

</form>

Angular Generated Forom Model : {{employeeForm.value | json}}

Bootstrap radio buttons in Angular - Slides

Angular forms tutorial

Suggested Videos
Part 2 - Reading data in angular | Text | Slides
Part 3 - Angular routing and navigation | Text | Slides
Part 4 - Angular base href | Text | Slides

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

Template Driven Forms
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.

We want to design our "Create Employee" form as shown below. 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
angular forms tutorial

Replace the HTML in "create-employee.component.html" file with the following HTML

<h3 class="panel-title">Create Employee</h3>

</div>

<input id="fullName" type="text" class="form-control"

name="fullName" [(ngModel)]="fullName">

</div>

<label for="email">Email</label>

<input id="email" type="text" class="form-control"

name="email" [(ngModel)]="email">

</div>

</div>

</form>

Angular Generated Form Model : {{employeeForm.value | json}}

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.

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 toolsthere is no directive with exportas set to ngform

Consider the following block of code

<input id="fullName" type="text" class="form-control"

name="fullName" [(ngModel)]="fullName">

</div>

To style the "Full Name" field and it's associated label, we are using Bootstrap. So "form-group" and "form-control" are Bootstrap CSS classes used for styling. There is no Angular here.
The "for" attribute on the label, is used to link the label with it's associated "fullName" input control. With the "for" attribute in place, when we click on the label, it's associated input element automatically receives the focus. Again there is no Angular here. It's all standard HTML.
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. Click here to watch two-way data binding video.
Notice we have set ngModel directive to "fullName". We do not have "fullName" property in the component class. Angular automatically creates "fullName" property using the value of the "name" attribute of the HTML input element. This is why "name" attribute is also required when we use ngModel directive. If we remove the "name" attribute, we get the following error.
If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions
So the bottom line is, if you want an input element to be tracked by the form make sure to include both the name attribute and ngModel directive. Otherwise that input element will not be part of the Form model created by Angular.

Consider the following piece of code : We are using the value property of the employeeForm to display fullName and email property values of the Form Model that angular automatically generates for us. We are using the Angular "json" pipe to format the JSON data.

Angular Generated Forom Model : {{employeeForm.value | json}}

Finally in the CreateEmployeeComponent class include the following saveEmployee() method. At the moment we are simply logging the value of the Angular generated Form model to the console. In our upcoming videos, we will discuss how to save the new employee to a database table.

saveEmployee(employeeForm: NgForm): void {
console.log(employeeForm.value);
}

Please note : Make sure to import NgForm type from '@angular/forms'
import { NgForm } from '@angular/forms';

Remember we discussed, The ngForm directive supplements the form element with additional features and properties like value, dirty, touched, valid etc. To see all these properties, knock of the value property and log just the employeeForm as shown below.

saveEmployee(employeeForm: NgForm): void {
console.log(employeeForm);
}

At this point, if you fill in the Full Name and Email text boxes and when you submit the form either by click the "Save" button or by pressing the "Enter" key you will see the form logged to the browser console and you can see all these properties.
angular forms example

These properties are greatly useful for performing form validation. We will discuss them in detail in our upcoming videos.

Angular forms tutorial - Slides

Angular base href

Suggested Videos
Part 1 - Angular project setup | Text | Slides
Part 2 - Reading data in angular | Text | Slides
Part 3 - Angular routing and navigation | Text | Slides

In this short video we will discuss the significance of the base href element in Angular.

When setting up routing in an angular application, the first step is to set the base path using the base href element. The base path tells the angular router, how to compose the navigation URLs. The browser uses the <base href> value to prefix relative URLs when referencing CSS files, scripts, and images.

During development we usually set this to a single forward slash as shown below.
<base href="/">

This means all the URLs now will be relative to the root of the application. So when we navaigate to "/list", the path "/list" will be appended to root UR and the complete URL will be as shown below. Notice "/list" is relative to the root URL.
http://localhost:4200/list

Along the same lines, when we navigate to "/create", the complete URL is http://localhost:4200/create

When we deploy our application to a server, we typically deploy it to a sub folder on the server. For example, if we are deploying our application in a sub-folder called "emp", then we set the base href element to /emp/ as shown below.
<base href="/emp/">

This means all the URLs now will be relative to the "emp" base path and will be as shown below.
http://serverName/emp/list
http://serverName/emp/create

During development we usually set base href element to a single forward slash as shown below.
<base href="/">

At this point, if we execute the following command, all the URLs will be relative to the root URL "http://localhost:4200"
ng serve -o

Also, on the "sources" tab in the browser developer tools, you will find all the Script, Images and Template files are relative to the root URL "http://localhost:4200" as shown in the image below.
angular base href

During development, if you want a different base path other than "/", simply execute the "ng serve" command with --base-href option set to your desired base path as shown below.
ng serve -o --base-href /emp/

At this point all the URLs will be relative to "http://localhost:4200/emp" as we have set the --base-href to /emp/. You can confirm this by looking at the URLs in the address bar and the "Sources" tab in the browser developer tools.
angular base href not working

On your local development machine, if you set the base href element in index.html to "/emp/" instead of a single "/" and if you run ng serve -o command without the "base-href" option you will not see anything on the browser. When you open the browser developer tools, you will see the JavaScript bundle files failed to load. To fix this execute ng serve command along with the base href option as shown below.
ng serve -o --base-href /emp/

On your local development machine, if you set the base href element in index.html to a single forward slash and if you want to deploy your application on a server on sub-folder called "emp", then you will have to remember to update the base href element value in index.html to "/emp/". There are 2 ways we can do this.

Manually update the index.html file OR
Use the --base-href option along with the ng build command as shown below. This will update the "base href" element value index.html.ng build --base-href /emp/