python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
angular 2 login form

Angular 2 Login Form Example and Its Validations

This post helps us to learn how to create Login 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 Angular2 Examples and Docs

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

Table of Contents:-
1.      APP.MODULE.TS
2.      LOGIN-PAGE.HTML
3.      LOGIN.COMPONENT.TS
4.      APP.MODULE.TS
5.      RESULT
The example for LOGIN as,


LOGIN-PAGE.HTML
<div class="row">
    <div class="col-lg-12">
        <form [formGroup]="login_Form" (ngSubmit)="doLogin(login_Form.value)">
            <div class="container">
                <input type="email" [formControl]="login_Form.controls['email']" placeholder="Your email" required>
                <input type="password" [formControl]="login_Form.controls['password']" placeholder="Your password" required>
                <button type="submit" [disabled]="!login_Form.valid">Log In</button>
            </div>
        </form>
    </div>
</div>

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

@Component({
    selector: 'login-page',
    templateUrl: './login.component.html',
    styleUrls:['./login.component.css']
})
export class LoginComponent {
    login_Form: FormGroup;
    email = new FormControl("", Validators.required);
    password = new FormControl("", Validators.required, Validators.minLength(8));

    constructor(fb: FormBuilder) {
        this.login_Form = fb.group({
            "email": this.email,
            "password": this.password
        });
    }

    doLogin(values: any): void {
        if (this.login_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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent,
        LoginComponent
    ],
    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: '**', redirectTo: 'home' }
        ]),
        FormsModule,
        ReactiveFormsModule
    ]
})
export class AppModule {
}

RESULT –

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

ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions