Skip to content

Commit 71f4c16

Browse files
AnkitSharma-007AnkitSharma-007
committed
code refactor
1 parent 68cb3d2 commit 71f4c16

22 files changed

+587
-347
lines changed

‎src/app/app.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<app-nav-bar></app-nav-bar>
2-
<div class="container">
2+
<div class="container my-4">
33
<router-outlet></router-outlet>
4-
</div>
4+
</div>

‎src/app/app.component.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { Component } from '@angular/core';
1+
import { Component } from "@angular/core";
22

33
@Component({
4-
selector: 'app-root',
5-
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.scss']
4+
selector: "app-root",
5+
templateUrl: "./app.component.html",
6+
styleUrls: ["./app.component.scss"],
77
})
8-
export class AppComponent {
9-
title = 'angular-forms-validation';
10-
}
8+
export class AppComponent {}

‎src/app/app.module.ts‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { BrowserModule } from '@angular/platform-browser';
2-
import { NgModule } from '@angular/core';
3-
import { RouterModule } from '@angular/router';
4-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
1+
import { BrowserModule } from "@angular/platform-browser";
2+
import { NgModule } from "@angular/core";
3+
import { RouterModule } from "@angular/router";
4+
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
55

6-
import { AppComponent } from './app.component';
7-
import { NavBarComponent } from './nav-bar/nav-bar.component';
8-
import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
9-
import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-form.component';
10-
import { HomeComponent } from './home/home.component';
11-
import { PasswordPatternDirective } from './directives/password-pattern.directive';
12-
import { MatchPasswordDirective } from './directives/match-password.directive';
13-
import { ValidateUserNameDirective } from './directives/validate-user-name.directive';
6+
import { AppComponent } from "./app.component";
7+
import { NavBarComponent } from "./nav-bar/nav-bar.component";
8+
import { ReactiveFormComponent } from "./reactive-form/reactive-form.component";
9+
import { TemplateDrivenFormComponent } from "./template-driven-form/template-driven-form.component";
10+
import { HomeComponent } from "./home/home.component";
11+
import { PasswordPatternDirective } from "./directives/password-pattern.directive";
12+
import { MatchPasswordDirective } from "./directives/match-password.directive";
13+
import { ValidateUserNameDirective } from "./directives/validate-user-name.directive";
1414

1515
@NgModule({
1616
declarations: [
@@ -21,19 +21,21 @@ import { ValidateUserNameDirective } from './directives/validate-user-name.direc
2121
HomeComponent,
2222
PasswordPatternDirective,
2323
MatchPasswordDirective,
24-
ValidateUserNameDirective
24+
ValidateUserNameDirective,
2525
],
2626
imports: [
2727
FormsModule,
2828
ReactiveFormsModule,
2929
BrowserModule,
3030
RouterModule.forRoot([
31-
{ path: '', component: HomeComponent },
32-
{ path: 'reactive-form', component: ReactiveFormComponent },
33-
{ path: 'template-form', component: TemplateDrivenFormComponent },
34-
], { relativeLinkResolution: 'legacy' }),
31+
{ path: "", component: HomeComponent },
32+
{ path: "reactive-form", component: ReactiveFormComponent },
33+
{
34+
path: "template-driven-form",
35+
component: TemplateDrivenFormComponent,
36+
},
37+
]),
3538
],
36-
providers: [],
37-
bootstrap: [AppComponent]
39+
bootstrap: [AppComponent],
3840
})
39-
export class AppModule { }
41+
export class AppModule {}

‎src/app/directives/match-password.directive.ts‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
1-
import { Directive, Input } from '@angular/core';
2-
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';
3-
import { CustomvalidationService } from '../services/customvalidation.service';
1+
import { Directive, Input } from "@angular/core";
2+
import {
3+
NG_VALIDATORS,
4+
Validator,
5+
ValidationErrors,
6+
AbstractControl,
7+
} from "@angular/forms";
8+
import { CustomvalidationService } from "../services/customvalidation.service";
49

510
@Directive({
6-
selector: '[appMatchPassword]',
7-
providers: [{ provide: NG_VALIDATORS, useExisting: MatchPasswordDirective, multi: true }]
11+
selector: "[appMatchPassword]",
12+
providers: [
13+
{
14+
provide: NG_VALIDATORS,
15+
useExisting: MatchPasswordDirective,
16+
multi: true,
17+
},
18+
],
819
})
920
export class MatchPasswordDirective implements Validator {
10-
@Input('appMatchPassword') MatchPassword: string[] = [];
21+
@Input("appMatchPassword") MatchPassword: string[] = [];
1122

12-
constructor(private customValidator: CustomvalidationService) { }
23+
constructor(private readonly customValidator: CustomvalidationService) {}
1324

14-
validate(formGroup: FormGroup): ValidationErrors {
15-
return this.customValidator.MatchPassword(this.MatchPassword[0], this.MatchPassword[1])(formGroup);
25+
validate(control: AbstractControl): ValidationErrors {
26+
return this.customValidator.matchPassword(
27+
this.MatchPassword[0],
28+
this.MatchPassword[1]
29+
)(control);
1630
}
17-
1831
}

‎src/app/directives/password-pattern.directive.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import { Directive } from '@angular/core';
2-
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
3-
import { CustomvalidationService } from '../services/customvalidation.service';
1+
import { Directive } from "@angular/core";
2+
import { NG_VALIDATORS, Validator, AbstractControl } from "@angular/forms";
3+
import { CustomvalidationService } from "../services/customvalidation.service";
44

55
@Directive({
6-
selector: '[appPasswordPattern]',
7-
providers: [{ provide: NG_VALIDATORS, useExisting: PasswordPatternDirective, multi: true }]
6+
selector: "[appPasswordPattern]",
7+
providers: [
8+
{
9+
provide: NG_VALIDATORS,
10+
useExisting: PasswordPatternDirective,
11+
multi: true,
12+
},
13+
],
814
})
915
export class PasswordPatternDirective implements Validator {
10-
11-
constructor(private customValidator: CustomvalidationService) { }
16+
constructor(private readonly customValidator: CustomvalidationService) {}
1217

1318
validate(control: AbstractControl): { [key: string]: any } | null {
1419
return this.customValidator.patternValidator()(control);

‎src/app/directives/validate-user-name.directive.ts‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,29 @@
1-
import { Directive, forwardRef } from '@angular/core';
2-
import { Validator, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms';
3-
import { CustomvalidationService } from '../services/customvalidation.service';
4-
import { Observable } from 'rxjs';
1+
import { Directive, forwardRef } from "@angular/core";
2+
import {
3+
AbstractControl,
4+
NG_ASYNC_VALIDATORS,
5+
ValidationErrors,
6+
AsyncValidator,
7+
} from "@angular/forms";
8+
import { Observable } from "rxjs";
9+
import { UserNameValidationService } from "../services/user-name-validation.service";
510

611
@Directive({
7-
selector: '[appValidateUserName]',
8-
providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => ValidateUserNameDirective), multi: true }]
9-
12+
selector: "[appValidateUserName]",
13+
providers: [
14+
{
15+
provide: NG_ASYNC_VALIDATORS,
16+
useExisting: forwardRef(() => ValidateUserNameDirective),
17+
multi: true,
18+
},
19+
],
1020
})
11-
export class ValidateUserNameDirective implements Validator {
12-
13-
constructor(private customValidator: CustomvalidationService) { }
21+
export class ValidateUserNameDirective implements AsyncValidator {
22+
constructor(
23+
private readonly userNameValidationService: UserNameValidationService
24+
) {}
1425

15-
validate(control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> {
16-
return this.customValidator.userNameValidator(control);
26+
validate(control: AbstractControl): Observable<ValidationErrors | null> {
27+
return this.userNameValidationService.validate(control);
1728
}
18-
1929
}

‎src/app/home/home.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="title-home">
2-
<h1>Welcome to Angular Forms demo</h1>
3-
</div>
1+
<div class="d-flex justify-content-center align-items-center title-home">
2+
<h1 class="display-3">Welcome to Angular Forms demo</h1>
3+
</div>

‎src/app/home/home.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.title-home {
2+
height: 400px;
3+
}

‎src/app/home/home.component.ts‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component } from "@angular/core";
22

33
@Component({
4-
selector: 'app-home',
5-
templateUrl: './home.component.html',
6-
styleUrls: ['./home.component.scss']
4+
selector: "app-home",
5+
templateUrl: "./home.component.html",
6+
styleUrls: ["./home.component.scss"],
77
})
8-
export class HomeComponent implements OnInit {
9-
10-
constructor() { }
11-
12-
ngOnInit() {
13-
}
14-
15-
}
8+
export class HomeComponent {}

‎src/app/models/userRegistration.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { FormControl } from "@angular/forms";
2+
3+
export interface UserRegistration {
4+
name: FormControl<string>;
5+
email: FormControl<string>;
6+
username: FormControl<string>;
7+
password: FormControl<string>;
8+
confirmPassword: FormControl<string>;
9+
}

0 commit comments

Comments
 (0)