Angular 2 Registration Form Example and Its Validations

This post helps us to learn how to create registration forms in the application that uses Angular 2 for the client side and ASP.NET Core with single page application (SPA) for the server application.

In Angular 2, the forms handing is quite different from there Angular 1.x.

Angular 1.x used to use ngModel and map to our internal data model but in Angular 2 us building forms and the forms controls.

Stayed Informed – Angular 2 examples and docs

Let’s start with a simple Registration form in HTML with Angular 2 apps.

Table of Contents:-

1.      REGISTRATION-PAGE.HTML

2.      REGISTRATION.COMPONENT.TS

3.      APP.MODULE.TS

4.      RESULT

The example for REGISTRATION as,

REGISTRATION -COMPONENT.HTML

<div class="row">
    <div class="col-lg-12">
        <form [formGroup]="registration_Form" (ngSubmit)="doRegistration(registration_Form.value)">
            <div class="container">
                <input type="text" [formControl]="registration_Form.controls['Name']" placeholder="Your Name" required>
                <input type="email" [formControl]="registration_Form.controls['Email']" placeholder="Your Email" required>
                <input type="number" [formControl]="registration_Form.controls['Phome']" placeholder="Your Phome" required>
                <input type="text" [formControl]="registration_Form.controls['Address']" placeholder="Your Address" required>
                <input type="number" [formControl]="registration_Form.controls['PinCode']" placeholder="Your PinCode" required>
                <button type="submit">Registor</button>
            </div>
        </form>
    </div>
</div>

REGISTRATION.COMPONENT.TS

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
    selector: 'registration-page',
    templateUrl: './registration.component.html',
    styleUrls: ['./registration.component.css']
})
export class RegistrationComponent {
    registration_Form: FormGroup;
    Name = new FormControl("", Validators.required);
    Email = new FormControl("", Validators.required, Validators.pattern('/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/'));
    Phome = new FormControl("", Validators.required);
    Address = new FormControl("", Validators.required);
    PinCode = new FormControl("", Validators.required, Validators.minLength(6));

    constructor(fb: FormBuilder) {
        this.registration_Form = fb.group({
            "Name": this.Name,
            "Email": this.Email,
            "Phome": this.Phome,
            "Address": this.Address,
            "PinCode": this.PinCode
        });
    }

    doRegistration(values: any): void {
        if (this.registration_Form.valid) {
            console.log(values);
        }
    }
}

APP.MODULE.TS

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { MenuComponent } from './components/menu/menu.component';
import { LoginComponent } from './components/login/login.component';
import { RegistrationComponent } from './components/registration/registration.component'

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent,
        LoginComponent,
        RegistrationComponent
    ],
    imports: [
        UniversalModule, // MUST BE FIRST IMPORT. THIS AUTOMATICALLY IMPORTS BROWSERMODULE, HTTPMODULE, AND JSONPMODULE TOO.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'login', component: LoginComponent },
            { path: 'registration', component: RegistrationComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        FormsModule,
        ReactiveFormsModule
    ]
})
export class AppModule {
}

RESULT –

I hope you are enjoying with this post! Please share with you friends. Thank you!!