Notes

<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
/>
<nav class="navbar navbar-expand-sm navbar-dark" style="height: 90px;">
<h1 class="title" style="margin-right: 70px;">Go Pharmeasy</h1>
<a href="" style="margin-right: 600px;">Home</a>
<button routerLink="/login" class="btn btn-primary mx-2" style="text-decoration: none;">SignIn/up</button>
</nav>
<div
class="text-center p-4"

>
<div class="container">
<div class="row">
<div
class="m-auto col-lg-12 col-md-8 col-sm-10 col-xs-10 ps-4 pe-4 rounded"
style="background: #e8e8e8"
>
<i class="fas fa-user p-3" style="font-size: 48px"></i>
<h5>Register</h5>
<p>Register by entering the information below</p>
<!-- <form (ngSubmit)="onSubmit()" #f="ngForm"> -->
<form [formGroup]="signupForm" (ngSubmit)="signup()">
<div class="form-group mb-3 px-2">

<div [ngClass]="{ 'has-error': formControls['Firstname'].touched && formControls['Firstname'].errors}">
<input type="text" id="Firstname" class="form-control form-control-sm me-2 rounded" placeholder="First Name" formControlName="Firstname" required/>


<div *ngIf="formControls['Firstname'].touched && formControls['Firstname'].errors" class="help-block">
<div *ngIf="formControls['Firstname'].errors['required']" style="color: red;"><h6>Please enter First Name</h6></div>
<div *ngIf="formControls['Firstname'].errors['minlength'] || formControls['Firstname'].errors['maxlength'] || formControls['Firstname'].errors['pattern']" style="color: red;">Accepts Alphabets,space & Min 5 to Max 30 Char</div>
</div>
</div>
</div>
<div class="form-group mb-3 px-2">
<div [ngClass]="{ 'has-error': formControls['Lastname'].touched && formControls['Lastname'].errors}">
<input type="text" id="Lastname" class="form-control form-control-sm rounded" placeholder="Last Name" formControlName="Lastname" required/>


<div *ngIf="formControls['Lastname'].touched && formControls['Lastname'].errors" class="help-block">
<div *ngIf="formControls['Lastname'].errors['required']" style="color: red;"><h6>Please enter Last Name</h6></div>
<div *ngIf="formControls['Lastname'].errors['minlength'] || formControls['Lastname'].errors['maxlength'] || formControls['Lastname'].errors['pattern']" style="color: red;">Accepts Alphabets, space & Min 5 to Max 30 Char</div>
</div>
</div>

</div>

<div class="form-group mb-3 px-2">
<div [ngClass]="{'has-error': formControls['Email'].touched && formControls['Email'].errors}" >
<input type="email" id="Email" class="form-control form-control-sm rounded" placeholder="Email Address"
formControlName="Email" required/>

<div *ngIf="formControls['Email'].touched && formControls['Email'].errors">
<div *ngIf="formControls['Email'].errors['required']" style="color: red;">Please enter Email</div>
</div>
</div>
</div>

<div class="form-group mb-3 px-2">
<div [ngClass]="{'has-error': formControls['dob'].touched && formControls['dob'].errors}" >
<input type="date" class="form-control form-control-sm rounded" placeholder="Date of Birth" ngModel
formControlName="dob"required/>

<div *ngIf="formControls['dob'].touched && formControls['dob'].errors">
<div *ngIf="formControls['dob'].errors['required']" style="color: red;">Please enter dob</div>
</div>
</div>
</div>
<div class="form-group mb-3 px-2">
<div [ngClass]="{ 'has-error': formControls['contactno'].touched && formControls['contactno'].errors}">
<input type="tel" class="form-control form-control-sm rounded" placeholder="Contact Number"
formControlName="contactno" ngModel required/>


<div *ngIf="formControls['contactno'].touched && formControls['contactno'].errors" class="help-block">
<div *ngIf="formControls['contactno'].errors['required']" style="color: red;"><h6>Please enter Contact Number</h6></div>
<div *ngIf="formControls['contactno'].errors['minlength'] || formControls['contactno'].errors['maxlength'] || formControls['contactno'].errors['pattern']" style="color: red;">Accepts only numbers 0-9</div>
</div>
</div>

</div>
<div [ngClass]="{ 'has-error': formControls['Pwd'].touched && formControls['Pwd'].errors}">
<div class="input-group mb-3 px-2">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-lock"></i>
</span>
</div>
<input type="password" class="form-control form-control-sm rounded" placeholder="Password"
formControlName="Pwd" ngModel required/>

<div *ngIf="formControls['Pwd'].touched && formControls['Pwd'].errors" class="help-block">
<div *ngIf="formControls['Pwd'].errors['required']" style="color: red;"><h6>Please enter Password</h6></div>
<div *ngIf="formControls['Pwd'].errors['minlength'] || formControls['Pwd'].errors['maxlength'] || formControls['Pwd'].errors['pattern']" style="color: red;">Please enter a valid Password</div>
</div>
</div>
</div>
<!-- <div
class="alert alert-danger mx-2" *ngIf="!Pwd.valid && Pwd.touched"
>
Must contain at least one number and one uppercase and lowercase
letter, and at least 8 or more characters.
</div> -->
<div [ngClass]="{ 'has-error': formControls['cnfPwd'].touched && formControls['cnfPwd'].errors}">
<div class="input-group mb-3 px-2">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-lock"></i>
</span>
</div>
<input type="password" class="form-control form-control-sm rounded" placeholder="Confirm Password"
formControlName="cnfPwd" ngModel required
/>
<div *ngIf="formControls['cnfPwd'].touched && formControls['cnfPwd'].errors" class="help-block">
<div *ngIf="formControls['cnfPwd'].errors['required']" style="color: red;"><h6>Please enter Password</h6></div>
<div *ngIf="formControls['cnfPwd'].errors['minlength'] || formControls['cnfPwd'].errors['maxlength'] || formControls['cnfPwd'].errors['pattern']" style="color: red;">Please enter a valid Password</div>
</div>
</div>
</div>
<div class="form-group mb-3 px-2">
<label style="float:left;">Role</label>
<div [ngClass]="{ 'has-error': formControls['role'].touched && formControls['role'].errors}">
<select class="form-control form-control-sm rounded" placeholder="Role" formControlName="role" ngModel required>
<option value="user">User</option>
</select>
<div *ngIf="formControls['role'].touched && formControls['role'].errors" class="help-block">
<div *ngIf="formControls['role'].errors['required']" style="color: red;"><h6>Please enter Role</h6></div>
</div>
</div>

</div>
<!-- <div
class="alert alert-danger mx-2" *ngIf="!cnfPwd.valid && cnfPwd.touched && Pwd.dirty"
>
Password & Confirm Password does not match.
</div> -->
<div class="form-group" [formGroup]="signupForm">
<button class="btn btn-info mb-3" type="submit" [disabled]="!signupForm.valid" >
Register Now
</button>
</div>

<a href="" routerLink="/login" style="background-color: #e8e8e8;color: black;">Already Registered Candidate?Go to Login Page</a>

</form>
</div>
</div>
</div>
</div>