Answers for "login form validation using pattern in angular"

login form validation using pattern in angular

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, Validators } from '@angular/forms';
import { UserService } from './user-service';
import { User } from './user';

@Component({
   selector: 'app-reactive',
   templateUrl: './reactive-form.component.html'
})
export class ReactiveFormComponent implements OnInit {
  unamePattern = "^[a-z0-9_-]{8,15}$";
  pwdPattern = "^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,12}$";
  mobnumPattern = "^((\\+91-?)|0)?[0-9]{10}$"; 
  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
  
  isValidFormSubmitted = null;
  
  userForm = this.formBuilder.group({
    username: ['', [Validators.required, Validators.pattern(this.unamePattern)]],
    password: ['', [Validators.required, Validators.pattern(this.pwdPattern)]],
    mobileNumber: ['', Validators.pattern(this.mobnumPattern)],
    email: ['', Validators.pattern(this.emailPattern)],
  });

  constructor(private formBuilder:FormBuilder, private userService: UserService) {
  }
  ngOnInit() {
  }
  onFormSubmit() {
     this.isValidFormSubmitted = false;
     if (this.userForm.invalid) {
        return;
     }
     this.isValidFormSubmitted = true;
     let user: User = this.userForm.value;
     this.userService.createUser(user);
     this.userForm.reset();
  }
  get username() {
     return this.userForm.get('username');
  }
  get password() {
     return this.userForm.get('password');
  }  
  get mobileNumber() {
     return this.userForm.get('mobileNumber');
  }    
  get email() {
     return this.userForm.get('email');
  }      
}

login form validation using pattern in angular

<h3>Reactive Form</h3>
<p *ngIf="isValidFormSubmitted && userForm.pristine" [ngClass] = "'success'">
    Form submitted successfully.
</p>
<form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
 <table>
  <tr> 
	<td>User Name: </td>
	<td> 
		<input formControlName="username">
		<div *ngIf="username.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
			<div *ngIf="username.errors.required">
				User name required.
			</div>  
			<div *ngIf="username.errors.pattern">
				User name not valid.
			</div> 
		</div>
	</td>
  </tr> 
  <tr> 
	<td>Password: </td>
	<td> 
		<input type="password" formControlName="password">
		<div *ngIf="password.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
			<div *ngIf="password.errors.required">
				Password required.
			</div>  
			<div *ngIf="password.errors.pattern">
				Password not valid.
			</div> 
		</div>		   
	</td>
  </tr> 	 
  <tr>
	<td>Mobile Number: </td>
	<td> 
		<input formControlName="mobileNumber">
		<div *ngIf="mobileNumber.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
			<div *ngIf="mobileNumber.errors.pattern">
				Mobile number not valid.
			</div> 
		</div>		   
	</td>
  </tr> 	 	 
  <tr>
	<td>Email: </td>
	<td> 
		<input formControlName="email">
		<div *ngIf="email.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
			<div *ngIf="email.errors.pattern">
				Email not valid.
			</div> 
		</div>		   
	</td>
  </tr>
  <tr> 	  
	<td colspan="2">
		<button>Submit</button>
	</td>
  </tr>	   
 </table>  
</form>