Notes

ts----------------

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';
import { PasswordValidators } from './passwordValidators';

@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css'],
})
export class RegisterComponent implements OnInit {
'registerForm': FormGroup;
isRegistered = false;

frm: any;

public response: any;
public reg: any;

constructor(
private formBuilder: FormBuilder,
public service: AuthService,
public route: Router
) {
this.reg = {
username: '',
password: '',
repassword: '',
};
}

ngOnInit(): void {
this.registerForm = this.formBuilder.group(
{
username: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: [
'',
[
Validators.required,
Validators.pattern(
'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
),
],
],
repassword: [
'',
[
Validators.required,
Validators.pattern(
'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
),
],
],
},
{
validator: PasswordValidators('password', 'repassword'),
}
);

this.service.getData().subscribe((data) => {
this.response = data;
});
}

get formControls1() {
return this.registerForm.controls;
}

register() {
console.log(this.registerForm.value);
this.isRegistered = true;
if (this.registerForm.invalid) {
return;
}
}

passwordMatch() {
return;
}

public addData() {
this.service.postData(this.registerForm.value).subscribe((data) => {
this.refreshData();
alert('Register Successful');
});
}

public refreshData() {
this.service.getData().subscribe((data) => {
this.response = data;
});
}

Reset(): void {
this.isRegistered = false;
this.registerForm.reset();
}
}


html---------------
<div class="header">
<div class="top">
<button routerLink="/home" class="btn btn-light">Back</button>
</div>
</div>

<div class="row">
<div class="col-sm-6">
<div class="register">
<h2 class="register-header">REGISTER</h2>
<form
[formGroup]="registerForm"
class="register-container"
(ngSubmit)="register()"
>
<div class="form-group mb-3">
<label for="username">Username</label>
<p
[ngClass]="{
'has-error': isRegistered && formControls1['username'].errors
}"
>
<input
type="username"
placeholder="Username"
class="form-control"
formControlName="username"
/>
</p>
<div
*ngIf="isRegistered && formControls1['username'].errors"
class="help-block"
>
<div *ngIf="formControls1['username'].errors['required']">
Username is required
</div>
</div>
</div>

<div class="form-group mb-3">
<label for="password">Password</label>
<p
[ngClass]="{
'has-error': isRegistered && formControls1['password'].errors
}"
>
<input
type="password"
placeholder="Password"
class="form-control"
formControlName="password"
autocomplete="off"
spellcheck="false"
/>
</p>

<div
*ngIf="isRegistered && formControls1['password'].errors"
class="help-block"
>
<div *ngIf="formControls1['password'].errors['required']">
Password is required
</div>

<div *ngIf="formControls1['password'].errors['pattern']">
Password should have at least 1 number, one capital letter and
minimum length 8
</div>
</div>
</div>

<div class="form-group mb-3">
<label for="repassword">Retype Password</label>
<p
[ngClass]="{
'has-error': isRegistered && formControls1['repassword'].errors
}"
>
<input
type="password"
placeholder="Password"
class="form-control"
formControlName="repassword"
autocomplete="off"
spellcheck="false"
/>
</p>

<div
*ngIf="isRegistered && formControls1['repassword'].errors"
class="help-block"
>
<div *ngIf="formControls1['repassword'].errors['required']">
Password is required
</div>
<div *ngIf="formControls1['repassword'].errors['pattern']">
Password should have at least 1 number, one capital letter and
minimum length 8
</div>

<div
*ngIf="formControls1['repassword'].errors['passwordValidators']"
>
Password and confirm password is mismatch
</div>
</div>
</div>

<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" title="h" />
<label class="form-check-label">Remember me</label>
</div>

<div class="button">
<button type="submit" (click)="addData()" class="btn btn-success">
Sign Up
</button>
&nbsp;
<button
type="reset"
(click)="Reset()"
class="btn btn-danger float-right"
>
Reset
</button>
</div>
</form>
</div>
</div>

<div class="col-sm-6">
<img src="../../../assets/images/login.jpg" alt="img" />
<h1>Already Registered?</h1>
<div class="button">
<button class="btn btn-primary" routerLink="/login">Login Here</button>
</div>
</div>
</div>



validator.ts--------------

import { AbstractControl, FormGroup } from '@angular/forms';

export function PasswordValidators(
controlName: string,
matchingControlName: string
) {
return (formGroup: FormGroup) => {
let control = formGroup.controls[controlName];
let matchingControl = formGroup.controls[matchingControlName];
if (
matchingControl.errors &&
!matchingControl.errors['passwordValidators']
) {
return;
}
if (control.value !== matchingControl.value) {
matchingControl.setErrors({ ['passwordValidators']: true });
} else {
matchingControl.setErrors(null);
}
};
}


css.------------------------

* {
font-family: cursive;
font-weight: bold;
}

h1 {
font-family: cursive;
font-weight: bold;
text-align: center;
}

.button {
align-items: center;
}

img {
padding: 20px;
}

.header .top {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: brown;
width: 100%;
}

.header button:hover {
background-color: gray;
}

.row {
width: 90%;
margin: 0 auto;
margin-top: 20px;
}

.login-header,
.register-header {
text-align: center;
background: brown;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #fff;
font-weight: bold;
}

.button {
text-align: center;
}

.login,
.register {
width: 100%;
margin: 16px auto;
font-size: 16px;
background: #ebebeb;
padding: 20px;
}

.login-header,
.login p,
.login label,
.register-header,
.register p,
.register label {
margin-bottom: 10px;
}

.help-block {
color: red;
}