Dhananjay Kumar

How to create Custom Validator for Angular Reactive Forms

Learn full article on the Infragistics blog

In this blog post, we will learn to create custom validators in Angular Reactive Forms. If you are new to reactive forms, learn how to create your first Angular reactive form here.

Let’s say we have a login form as shown in the listing below. Currently, the form controls do not have any validations attached to it.

Here, we are using FormGroup to create a reactive form. On the component template, you can attach loginForm as shown in the code listing below. Using property binding, the formGroup property of the HTML form element is set to loginForm and the formControlName value of these controls are set to the individual FormControl property of FormGroup.

This will give you a reactive form in your application:

Using Validators

Angular provides us many useful validators, including required, minLength, maxLength, and pattern. These validators are part of the Validators class, which comes with the @angular/forms package.

Let’s assume you want to add a required validation to the email control and a maxLength validation to the password control. Here’s how you do that:

To work with Validators, make sure to import them in the component class:

On the template, you can use validators to show or hide an error message. Essentially, you are reading the formControl using the get() method and checking whether it has an error or not using the hasError() method. You are also checking whether the formControl is touched or not using the touched property.

If the user does not enter an email, then the reactive form will show an error as follows:

Custom Validator

Let us say you want the age range to be from 18 to 45. Angular does not provide us range validation; therefore, we will have to write a custom validator for this.

In Angular, creating a custom validator is as simple as creating another function. The only thing you need to keep in mind is that it takes one input parameter of type AbstractControl and it returns an object of key value pair if the validation fails.

Let’s create a custom validator called ageRangeValidator, where the user should able to enter an age only if it’s in a given range.

The type of the first parameter is AbstractControl because it is a base class of FormControl, FormArray, and FormGroup, and it allows you to read the value of the control passed to the custom validator function. The custom validator returns either of the following:

1. If the validation fails, it returns an object, which contains a key value pair. Key is the name of the error and the value is always Boolean true.

2. If the validation does not fail, it returns null.

Learn full article on the Infragistics blog

Hosted 11th free Angular session

On 13 January 2018, geek97 hosted 11^th free session on Angular in Gurgaon. You can find detail of meetup here

Around 35 senior Angular Developers attended the meetup and Dhananjay Kumar delivered the sessions. There were two sessions:

Component Communications

@Input
@Output
EventEmitter
Temp Ref variable

Reactive Forms

FormControl
FormGroup
Validation
Custom Validation

You can learn in details about these topics here:

Understanding @Output and EventEmitter in Angular

How to Create Your First Angular Reactive Form

Communication Between Components Using @Input() in Angular

We look forward to host next Angular meetup on first Saturday of February. In addition, have you checked ng-India, India Angular Conference?

Join geek97 meetup group here https://www.meetup.com/Geek97/

Understanding @Output and EventEmitter in Angular

Read full article on the Infragistics blog

Angular is based on a one-directional data flow and does not have two-way data binding. So, how do you get a component to emit an event to another component?

In Angular, a component can emit an event using @Output and EventEmitter. Both are parts of the @angular/core.

Confused by the jargon? Let’s simplify it together. Consider the AppChildComponent as listed below:

There is a button in the AppChildComponent template which is calling the function handleclick. Let’s use the app-child component inside the AppComponent as shown in the listing below:

Here we’re using AppChildCopmponent inside AppComponent, thereby creating a parent/child kind of relationship, in which AppComponent is the parent and AppChildComponent is the child. When we run the application with a button click, you’ll see this message in the browser console:

So far, it’s very simple to use event binding to get the button to call the function in the component. Now, let’s tweak the requirement a bit. What if you want to execute a function of AppComponent on the click event of a button inside AppChildComponent?

To do this, you will have to emit the button click event from AppChildComponent. Import EventEmitter and Output from @angular/core.

Here we are going to emit an event and pass a parameter to the event. Consider the code below:

Right now, we are performing the following tasks in the AppChildComponent class:

1. Created a variable called counter, which will be passed as the parameter of the emitted event.

2. Created an EventEmitter valueChange, which will be emitted to the parent component on the click event of the button.

3. Created a function named valueChanged(). This function is called on the click event of the button, and inside the function event valueChange is emitted.

4. While emitting valueChange event, value of counter is passed as parameter.

Read full article on the Infragistics blog

Proud to present in East India Largest Tech Conference TechBhubaneswar

I will start with TechBhubaneswar is one of the best-organized conference. Disciplined volunteers, visionary core team members, and electrifying audiences. It was surely a gala gathering of more than 500 techie in beautiful city of Bhubaneswar. I am humbled that I was invited as speaker. I had proud moment representing Infragistics in esteem conference and teaching some JavaScript to 250 developers.

You can watch my talk here:

On 10 December 2017, I had an opportunity to give a talk in East India Largest Developer Conference, TechBhubnaeswar. I presented on “JavaScript Objects and Prototypes”.

About the conference

TechBhubaneswar is East India largest tech conference, which brings together minds that are excited about headways, expansions and possibilities in the field of Software Industry. The event is hosted by Mindfire solution to inspire young techie minds to imagine and pursue. This was their second edition, and in a single day conference comprise of 12 sessions in 3 tracks and 1 panel discussion.

It was one of the best-organized conference attended by me. Each volunteer and members were highly motivated to deliver best experience to both speakers and attendees. I admire vison of Mindfire solution to bring esteem speakers to this part of India and nurture great tech eco system. Congrats to them for their awesome work.

About my talk

My talk was just after respected Shivprasad Koirala. He gave a very informative talk on Design Patterns in C#. I was bit nervous that how audience would take my session on JavaScript Objects and Prototypes.

As JavaScript prototypes are always confused for all of us, so I had a tricky task ahead of me to simplify this topic to 250 audiences. I had to use white board in a conference to simplify prototypes and __proto__ to developers.

I divided my one-hour talk in four section and did four major demos to teach these topics. I logically divided talk in four parts as,

I have written extensively about these topics on Infragistics blog here feel free to refer them. It was one of the best audience, I have ever presented too.

At the end, I found happy faces and it was good. Positive energy of each single audience motivated me and I thank them for bottom of heart.

You can watch talk here:

Once again, I thank TechBhubaneswar team for this opportunity and I look forward for next year conference.

Class in JavaScript

Read full article on the Infragistics blog

ECMAScript 6 introduced the class keyword to create classes in JavaScript. Now, you can just use the class attribute to create a class in JavaScript. Before ECMA 6, whenever you called a function using a new operator, the function returned a new object. Therefore, the function was acting as a class and known as a constructor. This way of calling a function to return an object is also known as the Constructor Invocation Pattern.

But In ECMAScript 6, a class can be created using the class keyword. Consider the code below:

In the above code snippet, you have created a class named Car using the ECMAScript 6 classkeyword. You can also create an object of the Car class as shown below:

The JavaScript class is a simplified syntax for the usual prototype based inheritance. It does not offer any new way of object creation or prototype inheritance and does not bring any new models of object orientation or inheritance in JavaScript. You could say that a class is a special function to create objects.

Read full article on the Infragistics blog