purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed: Changing 'password' field while 'passwordConfirm' field is filled doesn't trigger the 'confirmPassword' validator

Browse Source 
Simplified the class and the template as we don't need an extra object for errors
Used native .hasError checks on template
This commit is contained in:
Sercan Yemen 2018-06-28 20:11:36 +03:00
parent 26a7cc41de
commit 85226e6094
8 changed files with 105 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/main/pages/authentication/register-2/register-2.component.html
View File

@ -32,34 +32,35 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Name" formControlName="name"> <input matInput placeholder="Name" formControlName="name">
<mat-error *ngIf="registerFormErrors.name.required"> <mat-error>
Name is required Name is required
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Email" formControlName="email"> <input matInput placeholder="Email" formControlName="email">
<mat-error *ngIf="registerFormErrors.email.required"> <mat-error *ngIf="registerForm.get('email').hasError('required')">
Email is required Email is required
</mat-error> </mat-error>
<mat-error *ngIf="!registerFormErrors.email.required && registerFormErrors.email.email"> <mat-error *ngIf="registerForm.get('email').hasError('email')">
Please enter a valid email address Please enter a valid email address
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="password" placeholder="Password" formControlName="password"> <input matInput type="password" placeholder="Password" formControlName="password">
<mat-error *ngIf="registerFormErrors.password.required"> <mat-error>
Password is required Password is required
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm"> <input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm">
<mat-error *ngIf="registerFormErrors.passwordConfirm.required"> <mat-error *ngIf="registerForm.get('passwordConfirm').hasError('required')">
Password confirmation is required Password confirmation is required
</mat-error> </mat-error>
<mat-error *ngIf="registerFormErrors.passwordConfirm.passwordsNotMatch"> <mat-error *ngIf="!registerForm.get('passwordConfirm').hasError('required')
&& registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
Passwords must match Passwords must match
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>

80
src/app/main/pages/authentication/register-2/register-2.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
@ -15,17 +15,10 @@ import { fuseAnimations } from '@fuse/animations';
export class Register2Component implements OnInit, OnDestroy export class Register2Component implements OnInit, OnDestroy
{ {
registerForm: FormGroup; registerForm: FormGroup;
registerFormErrors: any;
// Private // Private
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {FormBuilder} _formBuilder
*/
constructor( constructor(
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _formBuilder: FormBuilder private _formBuilder: FormBuilder
@ -46,14 +39,6 @@ export class Register2Component implements OnInit, OnDestroy
} }
}; };
// Set the defaults
this.registerFormErrors = {
name : {},
email : {},
password : {},
passwordConfirm: {}
};
// Set the private defaults // Set the private defaults
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
} }
@ -71,14 +56,16 @@ export class Register2Component implements OnInit, OnDestroy
name : ['', Validators.required], name : ['', Validators.required],
email : ['', [Validators.required, Validators.email]], email : ['', [Validators.required, Validators.email]],
password : ['', Validators.required], password : ['', Validators.required],
passwordConfirm: ['', [Validators.required, confirmPassword]] passwordConfirm: ['', [Validators.required, confirmPasswordValidator]]
}); });
this.registerForm.valueChanges // Update the validity of the 'passwordConfirm' field
// when the 'password' field changes
this.registerForm.get('password').valueChanges
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => { .subscribe(() => {
this.onRegisterFormValuesChanged(); this.registerForm.get('passwordConfirm').updateValueAndValidity();
}); });
} }
/** /**
@ -90,48 +77,19 @@ export class Register2Component implements OnInit, OnDestroy
this._unsubscribeAll.next(); this._unsubscribeAll.next();
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
} }
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* On form values changed
*/
onRegisterFormValuesChanged(): void
{
for ( const field in this.registerFormErrors )
{
if ( !this.registerFormErrors.hasOwnProperty(field) )
{
continue;
}
// Clear previous errors
this.registerFormErrors[field] = {};
// Get the control
const control = this.registerForm.get(field);
if ( control && control.dirty && !control.valid )
{
this.registerFormErrors[field] = control.errors;
}
}
}
} }
/** /**
* Confirm password * Confirm password validator
* *
* @param {AbstractControl} control * @param {AbstractControl} control
* @returns {{passwordsNotMatch: boolean}} * @returns {ValidationErrors | null}
*/ */
function confirmPassword(control: AbstractControl): any export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
{
if ( !control.parent || !control ) if ( !control.parent || !control )
{ {
return; return null;
} }
const password = control.parent.get('password'); const password = control.parent.get('password');
@ -139,18 +97,18 @@ function confirmPassword(control: AbstractControl): any
if ( !password || !passwordConfirm ) if ( !password || !passwordConfirm )
{ {
return; return null;
} }
if ( passwordConfirm.value === '' ) if ( passwordConfirm.value === '' )
{ {
return; return null;
} }
if ( password.value !== passwordConfirm.value ) if ( password.value === passwordConfirm.value )
{ {
return { return null;
passwordsNotMatch: true
};
} }
}
return {'passwordsNotMatching': true};
};

13
src/app/main/pages/authentication/register/register.component.html
View File

@ -14,34 +14,35 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Name" formControlName="name"> <input matInput placeholder="Name" formControlName="name">
<mat-error *ngIf="registerFormErrors.name.required"> <mat-error>
Name is required Name is required
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Email" formControlName="email"> <input matInput placeholder="Email" formControlName="email">
<mat-error *ngIf="registerFormErrors.email.required"> <mat-error *ngIf="registerForm.get('email').hasError('required')">
Email is required Email is required
</mat-error> </mat-error>
<mat-error *ngIf="!registerFormErrors.email.required && registerFormErrors.email.email"> <mat-error *ngIf="registerForm.get('email').hasError('email')">
Please enter a valid email address Please enter a valid email address
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="password" placeholder="Password" formControlName="password"> <input matInput type="password" placeholder="Password" formControlName="password">
<mat-error *ngIf="registerFormErrors.password.required"> <mat-error>
Password is required Password is required
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm"> <input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm">
<mat-error *ngIf="registerFormErrors.passwordConfirm.required"> <mat-error *ngIf="registerForm.get('passwordConfirm').hasError('required')">
Password confirmation is required Password confirmation is required
</mat-error> </mat-error>
<mat-error *ngIf="registerFormErrors.passwordConfirm.passwordsNotMatch"> <mat-error *ngIf="!registerForm.get('passwordConfirm').hasError('required')
&& registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
Passwords must match Passwords must match
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>

76
src/app/main/pages/authentication/register/register.component.ts
View File

@ -1,10 +1,10 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/internal/operators';
import { FuseConfigService } from '@fuse/services/config.service'; import { FuseConfigService } from '@fuse/services/config.service';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/internal/operators';
@Component({ @Component({
selector : 'register', selector : 'register',
@ -15,7 +15,6 @@ import { takeUntil } from 'rxjs/internal/operators';
export class RegisterComponent implements OnInit, OnDestroy export class RegisterComponent implements OnInit, OnDestroy
{ {
registerForm: FormGroup; registerForm: FormGroup;
registerFormErrors: any;
// Private // Private
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
@ -40,14 +39,6 @@ export class RegisterComponent implements OnInit, OnDestroy
} }
}; };
// Set the defaults
this.registerFormErrors = {
name : {},
email : {},
password : {},
passwordConfirm: {}
};
// Set the private defaults // Set the private defaults
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
} }
@ -65,13 +56,15 @@ export class RegisterComponent implements OnInit, OnDestroy
name : ['', Validators.required], name : ['', Validators.required],
email : ['', [Validators.required, Validators.email]], email : ['', [Validators.required, Validators.email]],
password : ['', Validators.required], password : ['', Validators.required],
passwordConfirm: ['', [Validators.required, confirmPassword]] passwordConfirm: ['', [Validators.required, confirmPasswordValidator]]
}); });
this.registerForm.valueChanges // Update the validity of the 'passwordConfirm' field
// when the 'password' field changes
this.registerForm.get('password').valueChanges
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => { .subscribe(() => {
this.onRegisterFormValuesChanged(); this.registerForm.get('passwordConfirm').updateValueAndValidity();
}); });
} }
@ -84,48 +77,19 @@ export class RegisterComponent implements OnInit, OnDestroy
this._unsubscribeAll.next(); this._unsubscribeAll.next();
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
} }
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* On form values changed
*/
onRegisterFormValuesChanged(): void
{
for ( const field in this.registerFormErrors )
{
if ( !this.registerFormErrors.hasOwnProperty(field) )
{
continue;
}
// Clear previous errors
this.registerFormErrors[field] = {};
// Get the control
const control = this.registerForm.get(field);
if ( control && control.dirty && !control.valid )
{
this.registerFormErrors[field] = control.errors;
}
}
}
} }
/** /**
* Confirm password * Confirm password validator
* *
* @param {AbstractControl} control * @param {AbstractControl} control
* @returns {{passwordsNotMatch: boolean}} * @returns {ValidationErrors | null}
*/ */
function confirmPassword(control: AbstractControl): any export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
{
if ( !control.parent || !control ) if ( !control.parent || !control )
{ {
return; return null;
} }
const password = control.parent.get('password'); const password = control.parent.get('password');
@ -133,18 +97,18 @@ function confirmPassword(control: AbstractControl): any
if ( !password || !passwordConfirm ) if ( !password || !passwordConfirm )
{ {
return; return null;
} }
if ( passwordConfirm.value === '' ) if ( passwordConfirm.value === '' )
{ {
return; return null;
} }
if ( password.value !== passwordConfirm.value ) if ( password.value === passwordConfirm.value )
{ {
return { return null;
passwordsNotMatch: true
};
} }
}
return {'passwordsNotMatching': true};
};

11
src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html
View File

@ -32,27 +32,28 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Email" formControlName="email"> <input matInput placeholder="Email" formControlName="email">
<mat-error *ngIf="resetPasswordFormErrors.email.required"> <mat-error *ngIf="resetPasswordForm.get('email').hasError('required')">
Email is required Email is required
</mat-error> </mat-error>
<mat-error *ngIf="!resetPasswordFormErrors.email.required && resetPasswordFormErrors.email.email"> <mat-error *ngIf="resetPasswordForm.get('email').hasError('email')">
Please enter a valid email address Please enter a valid email address
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="password" placeholder="Password" formControlName="password"> <input matInput type="password" placeholder="Password" formControlName="password">
<mat-error *ngIf="resetPasswordFormErrors.password.required"> <mat-error>
Password is required Password is required
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm"> <input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm">
<mat-error *ngIf="resetPasswordFormErrors.passwordConfirm.required"> <mat-error *ngIf="resetPasswordForm.get('passwordConfirm').hasError('required')">
Password confirmation is required Password confirmation is required
</mat-error> </mat-error>
<mat-error *ngIf="resetPasswordFormErrors.passwordConfirm.passwordsNotMatch"> <mat-error *ngIf="!resetPasswordForm.get('passwordConfirm').hasError('required')
&& resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
Passwords must match Passwords must match
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>

76
src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts
View File

@ -1,10 +1,10 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/internal/operators';
import { FuseConfigService } from '@fuse/services/config.service'; import { FuseConfigService } from '@fuse/services/config.service';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/internal/operators';
@Component({ @Component({
selector : 'reset-password-2', selector : 'reset-password-2',
@ -15,7 +15,6 @@ import { takeUntil } from 'rxjs/internal/operators';
export class ResetPassword2Component implements OnInit, OnDestroy export class ResetPassword2Component implements OnInit, OnDestroy
{ {
resetPasswordForm: FormGroup; resetPasswordForm: FormGroup;
resetPasswordFormErrors: any;
// Private // Private
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
@ -40,13 +39,6 @@ export class ResetPassword2Component implements OnInit, OnDestroy
} }
}; };
// Set the defaults
this.resetPasswordFormErrors = {
email : {},
password : {},
passwordConfirm: {}
};
// Set the private defaults // Set the private defaults
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
} }
@ -61,15 +53,18 @@ export class ResetPassword2Component implements OnInit, OnDestroy
ngOnInit(): void ngOnInit(): void
{ {
this.resetPasswordForm = this._formBuilder.group({ this.resetPasswordForm = this._formBuilder.group({
name : ['', Validators.required],
email : ['', [Validators.required, Validators.email]], email : ['', [Validators.required, Validators.email]],
password : ['', Validators.required], password : ['', Validators.required],
passwordConfirm: ['', [Validators.required, confirmPassword]] passwordConfirm: ['', [Validators.required, confirmPasswordValidator]]
}); });
this.resetPasswordForm.valueChanges // Update the validity of the 'passwordConfirm' field
// when the 'password' field changes
this.resetPasswordForm.get('password').valueChanges
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => { .subscribe(() => {
this.onResetPasswordFormValuesChanged(); this.resetPasswordForm.get('passwordConfirm').updateValueAndValidity();
}); });
} }
@ -82,48 +77,19 @@ export class ResetPassword2Component implements OnInit, OnDestroy
this._unsubscribeAll.next(); this._unsubscribeAll.next();
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
} }
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* On form values changed
*/
onResetPasswordFormValuesChanged(): void
{
for ( const field in this.resetPasswordFormErrors )
{
if ( !this.resetPasswordFormErrors.hasOwnProperty(field) )
{
continue;
}
// Clear previous errors
this.resetPasswordFormErrors[field] = {};
// Get the control
const control = this.resetPasswordForm.get(field);
if ( control && control.dirty && !control.valid )
{
this.resetPasswordFormErrors[field] = control.errors;
}
}
}
} }
/** /**
* Confirm password * Confirm password validator
* *
* @param {AbstractControl} control * @param {AbstractControl} control
* @returns {{passwordsNotMatch: boolean}} * @returns {ValidationErrors | null}
*/ */
function confirmPassword(control: AbstractControl): any export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
{
if ( !control.parent || !control ) if ( !control.parent || !control )
{ {
return; return null;
} }
const password = control.parent.get('password'); const password = control.parent.get('password');
@ -131,18 +97,18 @@ function confirmPassword(control: AbstractControl): any
if ( !password || !passwordConfirm ) if ( !password || !passwordConfirm )
{ {
return; return null;
} }
if ( passwordConfirm.value === '' ) if ( passwordConfirm.value === '' )
{ {
return; return null;
} }
if ( password.value !== passwordConfirm.value ) if ( password.value === passwordConfirm.value )
{ {
return { return null;
passwordsNotMatch: true
};
} }
}
return {'passwordsNotMatching': true};
};

11
src/app/main/pages/authentication/reset-password/reset-password.component.html
View File

@ -14,27 +14,28 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Email" formControlName="email"> <input matInput placeholder="Email" formControlName="email">
<mat-error *ngIf="resetPasswordFormErrors.email.required"> <mat-error *ngIf="resetPasswordForm.get('email').hasError('required')">
Email is required Email is required
</mat-error> </mat-error>
<mat-error *ngIf="!resetPasswordFormErrors.email.required && resetPasswordFormErrors.email.email"> <mat-error *ngIf="resetPasswordForm.get('email').hasError('email')">
Please enter a valid email address Please enter a valid email address
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="password" placeholder="Password" formControlName="password"> <input matInput type="password" placeholder="Password" formControlName="password">
<mat-error *ngIf="resetPasswordFormErrors.password.required"> <mat-error>
Password is required Password is required
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm"> <input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm">
<mat-error *ngIf="resetPasswordFormErrors.passwordConfirm.required"> <mat-error *ngIf="resetPasswordForm.get('passwordConfirm').hasError('required')">
Password confirmation is required Password confirmation is required
</mat-error> </mat-error>
<mat-error *ngIf="resetPasswordFormErrors.passwordConfirm.passwordsNotMatch"> <mat-error *ngIf="!resetPasswordForm.get('passwordConfirm').hasError('required')
&& resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
Passwords must match Passwords must match
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>

78
src/app/main/pages/authentication/reset-password/reset-password.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
@ -15,17 +15,10 @@ import { fuseAnimations } from '@fuse/animations';
export class ResetPasswordComponent implements OnInit, OnDestroy export class ResetPasswordComponent implements OnInit, OnDestroy
{ {
resetPasswordForm: FormGroup; resetPasswordForm: FormGroup;
resetPasswordFormErrors: any;
// Private // Private
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {FormBuilder} _formBuilder
*/
constructor( constructor(
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _formBuilder: FormBuilder private _formBuilder: FormBuilder
@ -46,13 +39,6 @@ export class ResetPasswordComponent implements OnInit, OnDestroy
} }
}; };
// Set the defaults
this.resetPasswordFormErrors = {
email : {},
password : {},
passwordConfirm: {}
};
// Set the private defaults // Set the private defaults
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
} }
@ -67,15 +53,18 @@ export class ResetPasswordComponent implements OnInit, OnDestroy
ngOnInit(): void ngOnInit(): void
{ {
this.resetPasswordForm = this._formBuilder.group({ this.resetPasswordForm = this._formBuilder.group({
name : ['', Validators.required],
email : ['', [Validators.required, Validators.email]], email : ['', [Validators.required, Validators.email]],
password : ['', Validators.required], password : ['', Validators.required],
passwordConfirm: ['', [Validators.required, confirmPassword]] passwordConfirm: ['', [Validators.required, confirmPasswordValidator]]
}); });
this.resetPasswordForm.valueChanges // Update the validity of the 'passwordConfirm' field
// when the 'password' field changes
this.resetPasswordForm.get('password').valueChanges
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => { .subscribe(() => {
this.onResetPasswordFormValuesChanged(); this.resetPasswordForm.get('passwordConfirm').updateValueAndValidity();
}); });
} }
@ -88,48 +77,19 @@ export class ResetPasswordComponent implements OnInit, OnDestroy
this._unsubscribeAll.next(); this._unsubscribeAll.next();
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
} }
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* On form values changed
*/
onResetPasswordFormValuesChanged(): void
{
for ( const field in this.resetPasswordFormErrors )
{
if ( !this.resetPasswordFormErrors.hasOwnProperty(field) )
{
continue;
}
// Clear previous errors
this.resetPasswordFormErrors[field] = {};
// Get the control
const control = this.resetPasswordForm.get(field);
if ( control && control.dirty && !control.valid )
{
this.resetPasswordFormErrors[field] = control.errors;
}
}
}
} }
/** /**
* Confirm password * Confirm password validator
* *
* @param {AbstractControl} control * @param {AbstractControl} control
* @returns {{passwordsNotMatch: boolean}} * @returns {ValidationErrors | null}
*/ */
function confirmPassword(control: AbstractControl): any export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
{
if ( !control.parent || !control ) if ( !control.parent || !control )
{ {
return; return null;
} }
const password = control.parent.get('password'); const password = control.parent.get('password');
@ -137,18 +97,18 @@ function confirmPassword(control: AbstractControl): any
if ( !password || !passwordConfirm ) if ( !password || !passwordConfirm )
{ {
return; return null;
} }
if ( passwordConfirm.value === '' ) if ( passwordConfirm.value === '' )
{ {
return; return null;
} }
if ( password.value !== passwordConfirm.value ) if ( password.value === passwordConfirm.value )
{ {
return { return null;
passwordsNotMatch: true
};
} }
}
return {'passwordsNotMatching': true};
};