Angular 7 - Tutorial angular 7 form login example

The following I will introduce and present you the lessons, examples of Angular 7,today I will present the steps to create an Angular login ... thumbnail 1 summary

February 18, 2019

The following I will introduce and present you the lessons, examples of Angular 7,today I will present the steps to create an Angular login login page.
Step 1. Create file styles.css




*{

margin: 0;

padding: 0;

}

body{

color: white;

font-size: 18px;

font-family: 'Courier New', Courier, monospace;

background-color: dimgrey;

}

Step2 . import libary in file app.module.ts




import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { LoginComponent } from '../login/login.component';

import { HttpClientModule }    from '@angular/common/http';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({

declarations: [

AppComponent,

LoginComponent

],

imports: [

BrowserModule, HttpClientModule,FormsModule,ReactiveFormsModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step 3. index.htm




<!DOCTYPE html>

<html>

<head>

<base href="/" />

<title>Angular 7 User Registration and Login Example</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- bootstrap css -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<style>

a { cursor: pointer }

</style>

</head>

<body>

<my-app>Loading...</my-app>

</body>

</html>

Step 4. Create folder login
1. File Login.component.css




h1{

text-align: center;

color: chartreuse;

}

.formLogin{

width: 50%;

margin: 0 auto;

}

.formLogin p{

color: red;

}

2. File login.component.html




<h1>Login</h1>

<div class="formLogin">

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

<div class="form-group">

<p *ngIf="flagsCheck">{{message}}</p>

</div>

<div class="form-group">

<label for="username">Username</label>

<input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />

<div *ngIf="submitted && f.username.errors" class="invalid-feedback">

<div *ngIf="f.username.errors.required">Username is required</div>

</div>

</div>

<div class="form-group">

<label for="password">Password</label>

<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />

<div *ngIf="submitted && f.password.errors" class="invalid-feedback">

<div *ngIf="f.password.errors.required">Password is required</div>

</div>

</div>

<div class="form-group">

<button [disabled]="loading" class="btn btn-primary" (click) ="checkLogin()" >Login</button>

<a router link="/" class="btn btn-link">Register</a>

</div>

</form>

</div>

3. File login.component.ts




import { Component, OnInit } from '@angular/core';

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

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

loginForm :FormGroup;

submitted = false;

flagsCheck = false;

message = "";

constructor(private formBuilder :FormBuilder) { }

ngOnInit() {

this.loginForm = this.formBuilder.group({

username: ['', Validators.required],

password: ['', Validators.required]

});

}

get f(){

return this.loginForm.controls;

}

onSubmit(){

this.submitted = true;

if(this.loginForm.invalid){

return;



}



}



checkLogin(){

this.flagsCheck = true;

if(this.loginForm.controls['username'].value ==="tienanh" && this.loginForm.controls['password'].value ==="123456"){

this.message ="login success"

}else{

this.message ="Username or password is incorrect";

}

}

}

Step 5. Folder app
1. app.component.css




#container{

width: 100%;

height: 500px;

margin: 0 auto;

background-color: burlywood;

}

2. app.component.html




<div id="container">

<app-login></app-login>

<!-- credits -->

<div class="text-center">

<p>

<a href="" target="_top">Angular 7 - Create Login in Angular example &tutorial</a>

</p>

<p>

<a href="http://android--example.blogspot.com/" target="_top">Tutorial Angular 7</a>

</p>

</div>

</div>

3. app.component.ts




import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

name = 'Angular';

}

Demo Login Angular.

Android Example

Monday, February 18, 2019

Angular 7 - Tutorial angular 7 form login example

Angular 7 - Tutorial angular 7 form login example

2 comments

Link

Labels