Guest User

Untitled

a guest
Apr 4th, 2018
144
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.11 KB | None | 0 0
  1. <form name="myform">
  2. <input type="email" name="email" ng-model="email" placeholder="Email Address" required /></input>
  3. <input type="password" name="password" required></input>
  4. <button type="submit" ng-disabled="myform.$invalid"> Submit </button>
  5. </form>
  6.  
  7. <form id="loginForm" #validform="ngForm" (ngSubmit)="onSubmit(validform)">
  8. <div class="example-container">
  9.  
  10. <mat-form-field>
  11. <input matInput placeholder="UserName" [formControl]="userName" autofocus>
  12. <mat-error *ngIf="userName.hasError('email') && !userName.hasError('required')">
  13. Please enter a valid email address
  14. </mat-error>
  15. <mat-error *ngIf="userName.hasError('required')">
  16. Email is
  17. <strong>required</strong>
  18. </mat-error>
  19. <br>
  20. </mat-form-field>
  21. <mat-form-field>
  22. <input matInput type="password" placeholder="Password" [formControl]="password">
  23. <mat-error *ngIf="password.hasError('required')">
  24. Password is
  25. <strong>required</strong>
  26. </mat-error>
  27. </mat-form-field>
  28.  
  29.  
  30. </div>
  31. <button type="submit" class="btn btn-success btn-block" [disabled]="userName.hasError('email') || password.hasError('required')"
  32. id="login_btn">Login</button>
  33. </form>
  34.  
  35. import { Component,OnInit, OnChanges, Injectable } from '@angular/core';
  36. import { FormGroup, FormControl } from '@angular/forms';
  37. import { Validators,NgForm, NgModel } '@angular/forms';
  38.  
  39. @Component({
  40. selector: 'app-login',
  41. templateUrl: './login.component.html',
  42. styleUrls: ['./login.component.css'
  43. ]
  44. })
  45.  
  46.  
  47. export class LoginComponent implements OnInit {
  48.  
  49. /* validate form */
  50. validform;
  51.  
  52. userName : any;
  53. password : any;
  54.  
  55. constructor(){ }
  56.  
  57. ngOnInit(){
  58. this.buildForm();
  59. }
  60. buildForm(){
  61. this.userName = new FormControl("", Validators.compose([
  62. Validators.required,
  63. Validators.email,
  64. ])),
  65. this.password = new FormControl('', [
  66. Validators.required,
  67. ])}
  68. onSubmit = function(validform: NgForm){
  69. //Call the login api with validForm Data
  70. }
  71.  
  72.  
  73. }
Add Comment
Please, Sign In to add comment