Guest User

Untitled

a guest
May 29th, 2018
110
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.20 KB | None | 0 0
  1. <form class="">
  2. <div>
  3. <p>Name:</p>
  4. <input type="text">
  5. </div>
  6. <div class="link-input">
  7. <p>City:</p>
  8. <input type="text">
  9. </div>
  10.  
  11. <button
  12. (click)="submitForm()">
  13. Submit
  14. </button>
  15. </form>
  16.  
  17. <div class="col-md-6 col-md-offset-3">
  18. <h2>Login</h2>
  19. <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
  20. <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
  21. <label for="username">Username</label>
  22. <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
  23. <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
  24. </div>
  25. <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
  26. <label for="password">Password</label>
  27. <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
  28. <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
  29. </div>
  30. <div class="form-group">
  31. <button [disabled]="loading" class="btn btn-primary">Login</button>
  32. <img *ngIf="loading" src="loading.gif" />
  33. <a [routerLink]="['/register']" class="btn btn-link">Register</a>
  34. </div>
  35. </form>
  36. </div>
  37.  
  38. import { Component, OnInit } from '@angular/core';
  39. import { Router, ActivatedRoute } from '@angular/router';
  40.  
  41. import { AlertService, AuthenticationService } from '../services';
  42.  
  43. @Component({
  44. templateUrl: './login.component.html'
  45. })
  46.  
  47. export class LoginComponent implements OnInit {
  48. model: any = {};
  49. loading = false;
  50. returnUrl: string;
  51.  
  52. constructor(
  53. private route: ActivatedRoute,
  54. private router: Router,
  55. private authenticationService: AuthenticationService,
  56. private alertService: AlertService) { }
  57.  
  58. ngOnInit() {}
  59.  
  60. login() {
  61. this.loading = true;
  62. this.authenticationService.login(this.model.username, this.model.password)
  63. .subscribe(
  64. data => {
  65. this.router.navigate([this.returnUrl]);
  66. },
  67. error => {
  68. this.alertService.error(error);
  69. this.loading = false;
  70. });
  71. }
  72. }
  73.  
  74. <form role="form" [formGroup]="inputForm" novalidate>
  75. <div>
  76. <p>Name:</p>
  77. <input
  78. formControlName="name"
  79. type="text">
  80. </div>
  81. <div class="link-input">
  82. <p>City:</p>
  83. <input
  84. formControlName="city"
  85. type="text">
  86. </div>
  87.  
  88. <button
  89. [disabled]="!inputForm.valid"
  90. (click)="submitForm()">
  91. </button>
  92. </form>
  93.  
  94. import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
  95.  
  96. export class InputComponent {
  97. public inputForm: FormGroup;
  98. constructor(private formBuilder: FormBuilder) {
  99.  
  100. this.inputForm = this.formBuilder.group({
  101. name: new FormControl('', Validators.required),
  102. city: new FormControl('', Validators.required),
  103. });
  104. }
  105. //... codes..
  106. }
  107.  
  108. import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
  109.  
  110. export class InputComponent {
  111. public inputForm: FormGroup;
  112. constructor(private formBuilder: FormBuilder) {
  113.  
  114. this.inputForm = this.formBuilder.group({
  115. name: new FormControl('', Validators.required, Validators.minLength(1)]),
  116. city: new FormControl('', Validators.required),
  117. });
  118. }
  119. }
  120.  
  121. <form [formGroup]="inputForm" novalidate>
  122. <p>Name:</p>
  123. <input placeholder="Exercise" formControlName="name">
  124. <div class="errorMsg" *ngIf="inputForm.get('name').touched && inputForm.get('name').status === 'INVALID'">
  125. Name is required</div>
  126. <p>City:</p>
  127. <input placeholder="Exercise" formControlName="city">
  128. <button [disabled]="!inputForm.valid || !inputForm.touched (click)="submitForm()">Submit</button>
  129. </form>
  130.  
  131. <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)">
  132. <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['usermail'].valid && signinForm.controls['usermail'].touched}">
  133. <label>Email Address</label>
  134. <input class="form-control" type="email" [formControl]="signinForm.controls['usermail']">
  135. <span *ngIf="signinForm.controls['usermail'].hasError('required') && signinForm.controls['usermail'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Email</span>
  136. <span *ngIf="signinForm.controls['usermail'].hasError('pattern') && signinForm.controls['usermail'].touched" class="required pull-right">*Invalid Email</span>
  137. </div>
  138. <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['userpass'].valid && signinForm.controls['userpass'].touched}">
  139. <label>Password</label>
  140. <input class="form-control" type="password" [formControl]="signinForm.controls['userpass']" (focus)="showErrorMessage=false">
  141. <span *ngIf="signinForm.controls['userpass'].hasError('required') && signinForm.controls['userpass'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Password</span>
  142. </div>
  143. <button type="submit" class="btn btn-pri mds_btn" [disabled]="!signinForm.valid">Login</button>
  144. </form>
  145.  
  146. import { Component } from '@angular/core';
  147. import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  148. import { Router } from '@angular/router';
  149.  
  150. @Component({
  151. selector: 'app-login',
  152. templateUrl: './login.component.html',
  153. styleUrls: [ './login.component.scss' ]
  154. })
  155. export class LoginComponent {
  156. myForm: FormGroup;
  157.  
  158. emailRegex: any = '^[a-z0-9]+(.[_a-z0-9]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,15})$';
  159. passRegex:any ='^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}$';
  160.  
  161. constructor(fb: FormBuilder) {
  162.  
  163. this.myForm = fb.group({
  164. 'logmail': [ null, Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) ],
  165. 'logpass': [ null, Validators.compose([ Validators.required, Validators.pattern(this.passRegex) ]) ]
  166. });
  167.  
  168. this.myForm.valueChanges.subscribe((form: any) => {
  169. });
  170. }
  171.  
  172. submitForm(lgvalue: any) {
  173. //do logic here after submitting the form
  174.  
  175. }
  176. }
Add Comment
Please, Sign In to add comment