Introduction

In this post, we are going to see how to create a custom validator directive in Angular 5. We have already seen how to do validation in our previous posts, and we have not done any validations for comparing the password and confirm the password, remember? Here we are going to see that. At the end of this article, you will get to know how to create a new shared directive according to our requirements. This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

1. What Is New and How to Set Up our First Angular 5 Application
2. Angular 5 Basic Demo Project Overview
3. Generating Your First Components And Modules in Angular 5 App
4. Implement Validations in Angular 5 App
5. Validation Using Template Driven Forms in Angular 5

Source Code

You can always clone or download the source code here

Background

Validations have a vital role in all application no matter in what language it is been developed. And since it is an essential part, there are many ways to achieve it. If we create a custom shared directive for creating a compare validator, it would be a great piece of code right, which can be reused.

Using the code

It is recommended to clone the project from GitHub, so that you can try everything your own. Let’s go ahead and write some codes now.

Creating a custom directive

Let’s just create a new directive in a shared folder and name it equal.validator.directive.ts. Now open that file and start writing the code. Let’s import some of the core components first.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
import { Directive, Input } from "@angular/core";

Now Let’s define our class and @Directive.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
import { Directive, Input } from "@angular/core";

@Directive({
    selector: "[appEqualValidator]",
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: EqualValidatorDirective,
        multi: true
    }]
})
export class EqualValidatorDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any; } {
        throw new Error("Method not implemented.");
    }
    registerOnValidatorChange?(fn: () => void): void {
        throw new Error("Method not implemented.");
    }
}

As you can see that, we are actually inheriting our new class  EqualValidatorDirective from Validator. Now we need to change the implementations of the method inside it. We should also add our new directive in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { EqualValidatorDirective } from './shared/equal.validator.directive';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavComponent } from './nav/nav.component';
import { RegistrationComponent } from './registration/registration.component';
import { LoginComponent } from './login/login.component';

import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: [AuthGuard]},
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavComponent,
    RegistrationComponent,
    LoginComponent,
    EqualValidatorDirective
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implement validate

Before we do that, we should add our new cutom directive selector in our confirm password field, because that’s where we are going to use our validator. So we are going to change our markup for confirm password field as below.

<div class="form-group" [class.has-error]="confirmPasswordControl.invalid && confirmPasswordControl.touched" [class.has-success]="confirmPasswordControl.valid">
    <input type="password" required class="form-control" name="confirmPassword" appEqualValidator="password" placeholder="Confirm Password" [(ngModel)]="confirmPassword" #confirmPasswordControl="ngModel">
    <span class="help-block" *ngIf="confirmPasswordControl.errors?.required && confirmPasswordControl.touched">
                  Confirm password is required
                </span>
</div>

As you can see, we are using the selector  appEqualValidator=”password” in our confirm password field. Please do check my previous posts if you are not sure how to implement other validations like email and required.

Now let’s go back to our custom directive and make some changes.

export class EqualValidatorDirective implements Validator {
    @Input() appEqualValidator: string;
    validate(c: AbstractControl): { [key: string]: any; } {
        const controlToCompare = c.parent.get(this.appEqualValidator)
        if (controlToCompare && controlToCompare.value == c.value)return { "equal": true };
        return { "notEqual": true }
    }
    registerOnValidatorChange?(fn: () => void): void {
        throw new Error("Method not implemented.");
    }
}

Here, we get our confirmPassword control in the absolute control “c”, and in the next line, we are just finding our password control by getting the parent element of confirmPassword. Once we get that, we can easily perform the comparison easily right? So, if it matches we return  { “equal”: true }; or else { “notEqual”: true }. Sounds good?

Introduce new span for custom message

Now we have a custom validator which compares two values, and the only thing which pending is, that to create a span for showing our new message in UI. Let’s change our markup now.

<div class="form-group" [class.has-error]="confirmPasswordControl.invalid && confirmPasswordControl.touched" [class.has-success]="confirmPasswordControl.valid">
    <input type="password" required class="form-control" name="confirmPassword" appEqualValidator="password" placeholder="Confirm Password" [(ngModel)]="confirmPassword" #confirmPasswordControl="ngModel">
    <span class="help-block" *ngIf="confirmPasswordControl.errors?.required && confirmPasswordControl.touched">
                  Confirm password is required
                </span>
    <span class="help-block" *ngIf="confirmPasswordControl.errors?.notEqual 
                      && confirmPasswordControl.touched && !confirmPasswordControl.errors?.required">
                  Password doesn't match
                </span>
</div>

As you can see, we are showing the custom message only if the directive returns notEqual property and there are no required errors. Let’s run our application and see it in action.

Here we have seen how we can implement shared custom validator directive. Let’s connect to a database and save these values in next article. Till then, bye.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Download Source Code

Download the source code from here: Dynamic Angular JS Tabs In MVC

Background

Recently I have got a requirement to create a tab control in one of my Angular JS application. Then I thought of creating the same dynamically according to the user needs. This article is a demo of the same.

Using the code

First, we will start with creating an MVC application. Open your visual studio, then click File->New->Project. Name your project.

Now our application is launched, please go ahead and install Angular JS in your project from NuGet packages. You can see some new CSS files and scripts has been added to our project. So the set up has been done. Now what we need to do is to move on the coding part.

Create a controller

Now we can create a new controller, in my case I created a controller ‘HomeController’. In my controller I am going to call a model action which will return some dynamic data. See the code below.

[csharp]
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
return View();
}
public JsonResult TabData()
{
Test t = new Test();
var myList = t.GetData();
return Json(myList, JsonRequestBehavior.AllowGet);
}

}
[/csharp]

Here we have one ActionResult and one JsonResult which we are going to call as Angular JS service. As you can see I am creating an instance of my model Test, now we will create our model class. Shall we?

Create Model

I have create a model class with the name Test. Here I am creating some data dynamically using a for loop and assign those values to a list. Please see the codes below.

[csharp]
namespace AsyncActions.Models
{
public class Test
{
public List<Customer> GetData()
{
try
{
List<Customer> cst = new List<Customer>();
for (int i = 0; i < 15; i++)
{
Customer c = new Customer();
c.CustomerID = i;
c.CustomerCode = "CST" + i;
cst.Add(c);
}
return cst;
}
catch (Exception)
{
throw new NotImplementedException();
}

}
}
public class Customer
{
public int CustomerID { get; set; }
public string CustomerCode { get; set; }
}
}
[/csharp]

As you can see I am creating a list of type Customer. Is that fine? Now what is pending? Yes, a view.

Create a view

Right click on your controller and click add view, that will give you a new view in your view folder. Hope you get that.

So our view is ready, now we can do some codes in our view to populate our tab. Are you ready?

[html]
<div ng-controller="tabController" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="tab">
<md-content class="md-padding">
<md-tabs md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
<md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}">
<div class="demo-tab tab{{$index}}" style="padding: 25px; text-align: center;">
<div ng-bind="tab.content"></div>
<br>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
</div>
</md-tab>
</md-tabs>
</md-content>
<form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding" style="padding-top: 0;">
<div layout="row" layout-sm="column">
<div flex="" style="position: relative;">
<h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
</div>
<md-input-container>
<label for="label">Label</label>
<input type="text" id="label" ng-model="tTitle">
</md-input-container>
<md-input-container>
<label for="content">Content</label>
<input type="text" id="content" ng-model="tContent">
</md-input-container>
<md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent" type="submit" style="margin-right: 0;">Add Tab</md-button>
</div>
</form>
</div>
[/html]

As you can see we are declaring our angular js controller and app name as follows.

[html]
ng-controller="tabController" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="tab"
[/html]

Now we will add the needed reference to our view.

Add the style sheet references

[html]
<link href="~/CSS/angular-material.css" rel="stylesheet" />
<link href="~/CSS/docs.css" rel="stylesheet" />
[/html]

Add styles for tabs

[css]
<style>
.tabsdemoDynamicTabs md-content {
background-color: transparent !important;
}

.tabsdemoDynamicTabs md-content md-tabs {
border: 1px solid #e1e1e1;
}

.tabsdemoDynamicTabs md-content md-tabs md-tab-content {
background: #f6f6f6;
}

.tabsdemoDynamicTabs md-content md-tabs md-tabs-wrapper {
background: white;
}

.tabsdemoDynamicTabs md-content h1:first-child {
margin-top: 0;
}

.tabsdemoDynamicTabs md-input-container {
padding-bottom: 0;
}

.tabsdemoDynamicTabs .remove-tab {
margin-bottom: 40px;
}

.tabsdemoDynamicTabs .demo-tab > div > div {
padding: 25px;
box-sizing: border-box;
}

.tabsdemoDynamicTabs .edit-form input {
width: 100%;
}

.tabsdemoDynamicTabs md-tabs {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.tabsdemoDynamicTabs md-tab[disabled] {
opacity: 0.5;
}

.tabsdemoDynamicTabs label {
text-align: left;
}

.tabsdemoDynamicTabs .long > input {
width: 264px;
}

.tabsdemoDynamicTabs .md-button.add-tab {
transform: translateY(5px);
}
</style>
[/css]

Add the JS references

[html]
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-animate.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-aria.min.js"></script>
<script src="~/Scripts/angular-messages.min.js"></script>
<script src="~/Scripts/svg-assets-cache.js"></script>
<script src="~/Scripts/angular-material.js"></script>
<script src="~/Scripts/Module.js"></script>
[/html]

Here Module.js is the file where we are creating our Angular JS controller, Service, App. So can we go ahead and create those?

Create an app, controller, service in Angular JS

To add an app, controller, servicer in Angular JS, you need to add the codes as below.

[js]
(function () {
‘use strict’;
var app;
(function () {
//create app
app = angular.module("tab", [‘ngMaterial’, ‘ngMessages’, ‘material.svgAssetsCache’]);
//create controller
app.controller(‘tabController’, function ($scope, tabService) {
var serv = tabService.getAll();
serv.then(function (d) {
tabController(d.data, $scope);
}, function (error) {
console.log(‘Something went wrong, please check after a while’);
})
});
//create service
app.service(‘tabService’, function ($http) {
this.getAll = function () {
return $http({
url: "/Home/TabData", //Here we are calling our controller JSON action
method: "GET"
});
};
});
})();
})();
[/js]

As you can see once we get the data from the Angular JS service (tabService) to the controller (tabController), we are passing the data to a function named tabController. Below is the code for that function.

[js]
function tabController(data, $scope) {
var tabsArray = [];
for (var i = 0; i < data.length; i++) {
tabsArray.push(
{
‘title’:"Customer ID: "+ data[i].CustomerID,
‘content’: data[i].CustomerCode + " The data you are seeing here is for the customer with the Custome rCode " + data[i].CustomerCode
});
}
var tabs = tabsArray,
selected = null,
previous = null;
$scope.tabs = tabs;
$scope.selectedIndex = 0;
$scope.$watch(‘selectedIndex’, function (current, old) {
previous = selected;
selected = tabs[current];
});
$scope.addTab = function (title, view) {
view = view || title + " Content View";
tabs.push({ title: title, content: view, disabled: false });
};
$scope.removeTab = function (tab) {
var index = tabs.indexOf(tab);
tabs.splice(index, 1);
};
}
[/js]

That’s all we have created the Angular JS tabs dynamically. Shall we see the output now?

Output

Dynamic Angular JS Tabs In MVC Figure 1

Dynamic Angular JS Tabs In MVC Figure 2

References

Angular JS Tabs

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

In this post we are going to discuss about AngularJS Most of you are familiar with the word AngularJS. This article is for those beginners that have not yet tried to implement AngularJS.

Download the source code

What Angular JS is?

AngularJS has been introduced by the giant Google. It is a framework that helps you create dynamic web apps. Normally AngularJS uses HTML as the backbone. AngularJS creates extended HTML tags that can be used as normal HTML tags. These tags will help you to write efficient code. The interesting fact is you can reduce lines of codes you may need to write when you use normal JavaScript.

Using the code

So let’s start using AngularJS. What would be the first step you need to do? That would be to include the relevant JavaScript file as the following.

[js]
<script src=“~/Script/angular.min.js”></script>
[/js]

Once you include this file, you are free to enter the world of AngularJS. You can download that file from https://angularjs.org/

Basic Directives

There are some basic directives that you must be aware of in AngularJS. Those are,

• ng-app
• ng-init
• ng-model
• ng-repeat

We will discuss them. Let’s start with a basic example.

As I said before, AngularJS uses our HTML to work. So here we will create HTML with minimal tags. Are you ready?

[html]
<div ng-app>
<p>My name is : {{“Please make me upper case letter”.toUpperCase()}}</p>
</div>
[/html]

In the preceding example we added the tag ng-app, right? So what is ng-app?

ng-app

The ng-app tag indicates the root element of our angular application. It normally acts as the owner of the application. We can use AngularJS only after the declaration of this tag. The important point to remember is that we can’t use AngularJS before this tag. We will explain this with an example.

What if we add a calculation of two numbers before the ng-app tag? We will check it out.

[html]
<p>Add me please: 2+2: {{ 2+2 }}</p>
<div ng-app>
<p>My name is : {{“Please make me upper case letter”.toUpperCase()}}</p>
</div>
[/html]

What would be the output of this? Any guess?

Basics of Angular JS Image 1

So what we need to make this work? For that you must put the code after the ng-app declaration. Can we try that? So our modified code would be as follows.

[html]
<div ng-app>
<p>My name is : {{“Please make me upper case letter”.toUpperCase()}}</p>
<p>Add me please: 2+2: {{ 2+2 }}</p>
[/html]

Now our output is as preceding.

Basics of Angular JS Image 2

Well, that was the introduction to the directive ng-app. I hope you tried it. Now we will move on to the next one. What is it?

ng-init

As the name implies, ng-init is used to initialize the data of our AngularJS. We will try a demo. So the following is my HTML.

[html]
<div ng-init=“myFavoriteWebsites=[‘http://www.c-sharpcorner.com/’,’http://www.codeproject.com/’,’http://sibeeshpassion.com/’]”>
My First fav website is : {{myFavoriteWebsites[0]}}
<br />
My Second fav website is : {{myFavoriteWebsites[1]}}
<br />
My Third fav website is : {{myFavoriteWebsites[2]}}
</div>
[/html]

Please note that I have used the ng-init tag after the ng-app tag. Now can you guess what the output would be?

Basics of Angular JS Image 3

I hope you understand what exactly ng-init tag is. Now we will see ng-model.

ng-model

Basically the ng-model directive binds the values from our HTML controls to our application data. Sounds good, right?

[html]
Currency in INR: <input type=“number” ng-model=“curinr” />
<br />
Currency in Dollar: {{curinr*62.27}}
[/html]

In the preceding example, we are using ng-model “curinr” and we are accessing that in our application data. In this process, whenever you type any value into the number box area, in a fraction of time you can see the calculated value. That is the power of AngularJS.

Basics of Angular JS Image 4

So I hope you understood how to use the ng-model directive. Now it is time to move on to our next directive, ng-repeat.

ng-repeat

This directive is used for looping through a collection or array just like we use a foreach loop in C#. Sounds pretty cool, right? It clones the HTML elements once for each item in the collection.

To work with ng-repeat we will see our previous example. We will modify that example as follows:

[html]
<div ng-init=“myFavoriteWebsites=[‘http://www.c-sharpcorner.com/’,’http://www.codeproject.com/’,’http://sibeeshpassion.com/’]”>
<ul>
My favorite websites are:
<li ng-repeat=“n in myFavoriteWebsites”>
{{n}}
</li>
</ul>
</div>
[/html]

Now see the output below. With less lines of codes we have done this process. That is all about the ng-repeat directive. I hope you liked it.

Basics of Angular JS Image 5

When you write any code, it must be light weight, efficient and easy right? If it is not easy, someone who looks at your code will be

Basics of Angular JS Image 6

So we have controllers.

What is controllers?

Angular JS controllers are Java script object. Simple . The main functionality of this object is controlling the data of our angular application. Sounds cool right?

The directive used here is ng-controller.

In the previous section we used ng-model right? We have seen an example too. Now we will reuse that example here.

The following is the example we done with ng-model

[html]
Currency in INR: <input type=“number” ng-model=“curinr” />
<br />
Currency in Dollar: {{curinr*62.27}}
[/html]

No we will change it to as follows.

[html]
<b>ng-Controller</b><br />
<div >
Currency in INR:
<input type=“number” ng-model=“inrvalue” />
<br />
Currency in Dollar: {{inrToDollar()}}
</div>
[/html]

In the above piece of code you can find a new directive ng-controller and I have assigned a valueInrToDollar . So our next step is to create that controller.

We can create a controller as follows.

[js]
var my = angular.module(‘angularBasic’, []);
[/js]

Here ‘angularBasic’ is our application name. The complete code for creating our controller is as follows.

[js]
<script>
var my = angular.module(‘angularBasic’, []);
my.controller(‘InrToDollar’, function ($scope) {
$scope.inrToDollar = function () {
return $scope.inrvalue * 62.27;
}
});
</script>
[/js]

What is $scope in the above code block?

$scope is a part of controller. Every controller must have its own $scope object. Here what exactly our controller do is setting the behaviors on $scope.

In the above code block we used a function which returns a dollar value for the given Indian rupee. I have given the function body inside of our controller.

No what would be our output?

Basics of Angular JS Image 7

Basics of Angular JS Image 8

Now think if you are using normal java script and jquery for doing this task, how many lines of codes you may need to write?

Complete Code

[html]
@{
ViewBag.Title = “Index”;
}
<h2>Index</h2>
<b>ng-app</b>
<br />
<div ng-app=“angularBasic” ng-controller=“InrToDollar”>
<p>My name is : {{“Please make me upper case letter”.toUpperCase()}}</p>
<p>Add me please: 2+2: {{ 2+2 }}</p>
<b>ng-init</b><br />
<div ng-init=“myFavoriteWebsites=[‘http://www.c-sharpcorner.com/’,’http://www.codeproject.com/’,’http://sibeeshpassion.com/’]”>
My First fav website is : {{myFavoriteWebsites[0]}}
<br />
My Second fav website is : {{myFavoriteWebsites[1]}}
<br />
My Third fav website is : {{myFavoriteWebsites[2]}}
</div>
<br />
<b>ng-model</b><br />
Currency in INR:
<input type=“number” ng-model=“curinr” />
<br />
Currency in Dollar: {{curinr*62.27}}
<br />
<b>nd-repeat</b><br />
<div ng-init=“myFavoriteWebsites=[‘http://www.c-sharpcorner.com/’,’http://www.codeproject.com/’,’http://sibeeshpassion.com/’]”>
<ul>
My favorite websites are:
<li ng-repeat=“n in myFavoriteWebsites”>{{n}}
</li>
</ul>
</div>
<b>ng-Controller</b><br />
<div >
Currency in INR:
<input type=“number” ng-model=“inrvalue” />
<br />
Currency in Dollar: {{inrToDollar()}}
</div>
<br />
</div>
<script src=“~/Script/angular.min.js”></script>
<script>
var my = angular.module(‘angularBasic’, []);
my.controller(‘InrToDollar’, function ($scope) {
$scope.inrToDollar = function () {
return $scope.inrvalue * 62.27;
}
});
</script>
[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu