This post will cover the step needed to take the angular universal app to the production server. This post assumes that you have running angular universal application and which is generated by angular CLI. Now open your […]
How to Deploy an Angular app in Production with Nginx
This tutorial I will show you Nginx installation and configuration steps to serve Angular application in production. I am gonna use Ubuntu 16.04 operating system. Install and Configure Nginx for Angular First update the […]
Cascading dropdown in Angular
In this article, you will learn how to use cascading DropDownList using Angular application. In following tutorial you gonna use Angular CLI to create an application. Here is the official website of Angular CLI. Why Angular […]
Angular – Global API service request method
Using HTTP service directly in all over the application is not scalable, its only work for small applications. Having a central location to manage HTTP calls, will reduce the maintenance and its robust solution. We can […]
Angular NgSwitch Directive
The NgSwitch directive lets you to insert different sets of elements into the document based on a specified value or expression.NgSwitch Directive resides inside CommonModule module, so you can import it as shown below […]
Angular 4 – Add dynamic class to the body based on route.
Inside the root app component, Inject the Router and subscribe to route change events and detect the NavigationStart event with the event type instance, its called NavigationStart. With the Renderer2 class we can add and […]
How to Apply CSS Classes Conditionally in Angular 2
Angular 2 provide different ways to apply class to the elements based on certain conditions. In this post I would like to show you couple of ways to conditionally applying class to a DOM element in Angular 2 with ngClass. […]
Angular 2 – Async Validator – Username/email availability check
In this post I will show you, how we can create custom async validator to check for email availability, same logic you can apply for username or other async validations. Lets create a component:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import { Component, OnInit } from '@angular/core'; import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms'; import { UserService } from '../services/user.service'; @Component({ selector: 'signup', template: `<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()" name="signupForm"> <div class="form-group"> <label for="login">Email Address<span class="requiredSymbol">*</span></label> <input autofocus pInputText type="email" id="username" formControlName="email" name="email" class="form-control form-control-lg" placeholder="Enter Your Email Address"> <span *ngIf="form.get('email').dirty || formSubmitclicked"> <small class="error" *ngIf="form.get('email').hasError('isEmailUnique')">This email has been registered already</small> <small class="error" *ngIf="form.get('email').hasError('required')">The Email field is required.</small> <small class="error" *ngIf="form.get('email').hasError('pattern')">The Email field must contain a valid email address.</small> </span> </div> <div class="form-group text-center"> <button type="submit" pButton class="btn btn-success btn-lg btn-block" label="Singup"></button> </div> </form>`, }) export class SignupComponent { form: FormGroup; constructor(private userService: UserService, private fb: FormBuilder) { this.buildForm(); } buildForm(): void { this.form = this.fb.group({ "email": ["", [ Validators.required, Validators.minLength(3) ], this.isEmailUnique.bind(this) // async Validator passed as 3rd parameter ] }); } isEmailUnique(control: FormControl) { const q = new Promise((resolve, reject) => { setTimeout(() => { this.userService.isEmailRegisterd(control.value).subscribe(() => { resolve(null); }, () => { resolve({ 'isEmailUnique': true }); }); }, 1000); }); return q; } onSubmit() { } } |
