Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- npm install ng6-toastr-notifications --save
- // set toastr
- showSuccess(position: any = 'top-left') {
- this.toastr.successToastr('This is success toast.', 'Success!', { position: position });
- }
- import { Component, OnInit } from '@angular/core';
- import { Login } from '../models/login';
- import { LoginService } from '../service/login.service';
- import {Router} from '@angular/router';
- import { ToastrManager } from 'ng6-toastr-notifications';
- @Component({
- selector: 'app-login-new',
- templateUrl: './login-new.component.html',
- styleUrls: ['./login-new.component.css']
- })
- export class LoginNewComponent implements OnInit {
- login = new Login('', '');
- wrong ='';
- error = '';
- success = '';
- constructor(private loginService: LoginService, private router: Router, public toastr: ToastrManager) {}
- // set toastr
- showSuccess(position: any = 'top-left') {
- this.toastr.successToastr('This is success toast.', 'Success!', { position: position });
- }
- ngOnInit() {}
- public loginCall(lg) {
- this.resetErrors();
- this.loginService.logdb(this.login)
- .subscribe(
- res => {
- if (res.message === 'success') {
- // this.success = 'Login successful';
- /*
- // set toastr
- showSuccess(position: any = 'top-left') {
- this.toastr.successToastr('This is success toast.', 'Success!', { position: position });
- }
- */
- }
- // Reset the form
- lg.reset();
- },
- err => this.error = err
- );
- }
- private resetErrors(){
- this.success = '';
- this.wrong = '';
- this.error = '';
- }
- }
- <div id="theForm">
- <h2>The form</h2>
- <form #lg="ngForm" name="theForm" (submit)="loginCall(lg)">
- <div class="form-group">
- <label>Username</label>
- <input type="text"
- class="form-control"
- name="username"
- [(ngModel)]="login.username"
- #loginUsername="ngModel"
- required
- pattern="^[a-zA-Z]+$">
- <span class="help-block danger" *ngIf="loginUsername.errors?.required && loginUsername.touched">
- The username is required
- </span>
- <span class="help-block danger" *ngIf="loginUsername.errors?.pattern && loginUsername.touched">
- The username can only contain the letters a-z or A-Z
- </span>
- </div>
- <div class="form-group">
- <label>Password</label>
- <input type="password"
- class="form-control"
- name="text"
- required
- [(ngModel)]="login.password"
- #loginPassword="ngModel">
- <span class="help-block danger" *ngIf="loginPassword.errors?.required && loginPassword.touched">
- The password is required
- </span>
- </div>
- <div *ngIf="success" class="alert alert-success">{{success}}</div>
- <button
- class="btn btn-primary btn-sm"
- [disabled]="lg.invalid">Login Now</button>
- </form>
- </div>
- <br><br><br>
- import { BrowserModule } from '@angular/platform-browser';
- import { FormsModule } from '@angular/forms';
- import { NgModule } from '@angular/core';
- import { RouterModule} from '@angular/router';
- import { appRoutes } from './routerConfig';
- import { HttpClientModule } from '@angular/common/http';
- import { ToastrModule } from 'ng6-toastr-notifications';
- import { AppComponent } from './app.component';
- import { LoginNewComponent } from './login-new/login-new.component';
- @NgModule({
- declarations: [
- AppComponent,
- LoginNewComponent
- ],
- imports: [
- BrowserModule,
- HttpClientModule,
- FormsModule,
- RouterModule,
- RouterModule.forRoot(appRoutes),
- ToastrModule.forRoot()
- ],
- providers: [],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
Add Comment
Please, Sign In to add comment