Simplified the class and the template as we don't need an extra object for errors

Used native .hasError checks on template

src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html

@@ -32,10 +32,10 @@
 
                 <mat-form-field>
                     <input matInput placeholder="Email" formControlName="email">
-                    <mat-error *ngIf="forgotPasswordFormErrors.email.required">
+                    <mat-error *ngIf="forgotPasswordForm.get('email').hasError('required')">
                         Email is required
                     </mat-error>
-                    <mat-error *ngIf="!forgotPasswordFormErrors.email.required && forgotPasswordFormErrors.email.email">
+                    <mat-error *ngIf="forgotPasswordForm.get('email').hasError('email')">
                         Please enter a valid email address
                     </mat-error>
                 </mat-form-field>

src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts

@@ -1,7 +1,5 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 import { fuseAnimations } from '@fuse/animations';
@@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations';
     styleUrls  : ['./forgot-password-2.component.scss'],
     animations : fuseAnimations
 })
-export class ForgotPassword2Component implements OnInit, OnDestroy
+export class ForgotPassword2Component implements OnInit
 {
     forgotPasswordForm: FormGroup;
-    forgotPasswordFormErrors: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
 
     /**
      * Constructor
@@ -45,14 +39,6 @@ export class ForgotPassword2Component implements OnInit, OnDestroy
                 }
             }
         };
-
-        // Set the defaults
-        this.forgotPasswordFormErrors = {
-            email: {}
-        };
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -67,50 +53,5 @@ export class ForgotPassword2Component implements OnInit, OnDestroy
         this.forgotPasswordForm = this._formBuilder.group({
             email: ['', [Validators.required, Validators.email]]
         });
-
-        this.forgotPasswordForm.valueChanges
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                this.onForgotPasswordFormValuesChanged();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On form values changed
-     */
-    onForgotPasswordFormValuesChanged(): void
-    {
-        for ( const field in this.forgotPasswordFormErrors )
-        {
-            if ( !this.forgotPasswordFormErrors.hasOwnProperty(field) )
-            {
-                continue;
-            }
-
-            // Clear previous errors
-            this.forgotPasswordFormErrors[field] = {};
-
-            // Get the control
-            const control = this.forgotPasswordForm.get(field);
-
-            if ( control && control.dirty && !control.valid )
-            {
-                this.forgotPasswordFormErrors[field] = control.errors;
-            }
-        }
     }
 }

src/app/main/pages/authentication/forgot-password/forgot-password.component.html

@@ -14,10 +14,10 @@
 
                 <mat-form-field>
                     <input matInput placeholder="Email" formControlName="email">
-                    <mat-error *ngIf="forgotPasswordFormErrors.email.required">
+                    <mat-error *ngIf="forgotPasswordForm.get('email').hasError('required')">
                         Email is required
                     </mat-error>
-                    <mat-error *ngIf="!forgotPasswordFormErrors.email.required && forgotPasswordFormErrors.email.email">
+                    <mat-error *ngIf="forgotPasswordForm.get('email').hasError('email')">
                         Please enter a valid email address
                     </mat-error>
                 </mat-form-field>

src/app/main/pages/authentication/forgot-password/forgot-password.component.ts

@@ -1,7 +1,5 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 import { fuseAnimations } from '@fuse/animations';
@@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations';
     styleUrls  : ['./forgot-password.component.scss'],
     animations : fuseAnimations
 })
-export class ForgotPasswordComponent implements OnInit, OnDestroy
+export class ForgotPasswordComponent implements OnInit
 {
     forgotPasswordForm: FormGroup;
-    forgotPasswordFormErrors: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
 
     /**
      * Constructor
@@ -45,14 +39,6 @@ export class ForgotPasswordComponent implements OnInit, OnDestroy
                 }
             }
         };
-
-        // Set the defaults
-        this.forgotPasswordFormErrors = {
-            email: {}
-        };
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -67,50 +53,5 @@ export class ForgotPasswordComponent implements OnInit, OnDestroy
         this.forgotPasswordForm = this._formBuilder.group({
             email: ['', [Validators.required, Validators.email]]
         });
-
-        this.forgotPasswordForm.valueChanges
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                this.onForgotPasswordFormValuesChanged();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On form values changed
-     */
-    onForgotPasswordFormValuesChanged(): void
-    {
-        for ( const field in this.forgotPasswordFormErrors )
-        {
-            if ( !this.forgotPasswordFormErrors.hasOwnProperty(field) )
-            {
-                continue;
-            }
-
-            // Clear previous errors
-            this.forgotPasswordFormErrors[field] = {};
-
-            // Get the control
-            const control = this.forgotPasswordForm.get(field);
-
-            if ( control && control.dirty && !control.valid )
-            {
-                this.forgotPasswordFormErrors[field] = control.errors;
-            }
-        }
     }
 }

src/app/main/pages/authentication/lock/lock.component.html

@@ -29,7 +29,7 @@
 
                 <mat-form-field>
                     <input matInput placeholder="Password" formControlName="password">
-                    <mat-error *ngIf="lockFormErrors.password.required">
+                    <mat-error>
                         Password is required
                     </mat-error>
                 </mat-form-field>

src/app/main/pages/authentication/lock/lock.component.ts

@@ -1,7 +1,5 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 import { fuseAnimations } from '@fuse/animations';
@@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations';
     styleUrls  : ['./lock.component.scss'],
     animations : fuseAnimations
 })
-export class LockComponent implements OnInit, OnDestroy
+export class LockComponent implements OnInit
 {
     lockForm: FormGroup;
-    lockFormErrors: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
 
     /**
      * Constructor
@@ -45,15 +39,6 @@ export class LockComponent implements OnInit, OnDestroy
                 }
             }
         };
-
-        // Set the defaults
-        this.lockFormErrors = {
-            username: {},
-            password: {}
-        };
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -74,50 +59,5 @@ export class LockComponent implements OnInit, OnDestroy
             ],
             password: ['', Validators.required]
         });
-
-        this.lockForm.valueChanges
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                this.onLockFormValuesChanged();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On form values changed
-     */
-    onLockFormValuesChanged(): void
-    {
-        for ( const field in this.lockFormErrors )
-        {
-            if ( !this.lockFormErrors.hasOwnProperty(field) )
-            {
-                continue;
-            }
-
-            // Clear previous errors
-            this.lockFormErrors[field] = {};
-
-            // Get the control
-            const control = this.lockForm.get(field);
-
-            if ( control && control.dirty && !control.valid )
-            {
-                this.lockFormErrors[field] = control.errors;
-            }
-        }
     }
 }

src/app/main/pages/authentication/login-2/login-2.component.html

@@ -32,17 +32,19 @@
 
                 <mat-form-field>
                     <input matInput placeholder="Email" formControlName="email">
-                    <mat-error *ngIf="loginFormErrors.email.required">
+                    <mat-error *ngIf="loginForm.get('email').hasError('required')">
                         Email is required
                     </mat-error>
-                    <mat-error *ngIf="!loginFormErrors.email.required && loginFormErrors.email.email">
+                    <mat-error
+                        *ngIf="!loginForm.get('email').hasError('required') &&
+                                loginForm.get('email').hasError('email')">
                         Please enter a valid email address
                     </mat-error>
                 </mat-form-field>
 
                 <mat-form-field>
                     <input matInput type="password" placeholder="Password" formControlName="password">
-                    <mat-error *ngIf="loginFormErrors.password.required">
+                    <mat-error>
                         Password is required
                     </mat-error>
                 </mat-form-field>

src/app/main/pages/authentication/login-2/login-2.component.ts

@@ -1,7 +1,5 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 import { fuseAnimations } from '@fuse/animations';
@@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations';
     styleUrls  : ['./login-2.component.scss'],
     animations : fuseAnimations
 })
-export class Login2Component implements OnInit, OnDestroy
+export class Login2Component implements OnInit
 {
     loginForm: FormGroup;
-    loginFormErrors: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
 
     /**
      * Constructor
@@ -45,15 +39,6 @@ export class Login2Component implements OnInit, OnDestroy
                 }
             }
         };
-
-        // Set the defaults
-        this.loginFormErrors = {
-            email   : {},
-            password: {}
-        };
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -69,50 +54,5 @@ export class Login2Component implements OnInit, OnDestroy
             email   : ['', [Validators.required, Validators.email]],
             password: ['', Validators.required]
         });
-
-        this.loginForm.valueChanges
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                this.onLoginFormValuesChanged();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On form values changed
-     */
-    onLoginFormValuesChanged(): void
-    {
-        for ( const field in this.loginFormErrors )
-        {
-            if ( !this.loginFormErrors.hasOwnProperty(field) )
-            {
-                continue;
-            }
-
-            // Clear previous errors
-            this.loginFormErrors[field] = {};
-
-            // Get the control
-            const control = this.loginForm.get(field);
-
-            if ( control && control.dirty && !control.valid )
-            {
-                this.loginFormErrors[field] = control.errors;
-            }
-        }
     }
 }

src/app/main/pages/authentication/login/login.component.html

@@ -14,17 +14,19 @@
 
                 <mat-form-field>
                     <input matInput placeholder="Email" formControlName="email">
-                    <mat-error *ngIf="loginFormErrors.email.required">
+                    <mat-error *ngIf="loginForm.get('email').hasError('required')">
                         Email is required
                     </mat-error>
-                    <mat-error *ngIf="!loginFormErrors.email.required && loginFormErrors.email.email">
+                    <mat-error
+                        *ngIf="!loginForm.get('email').hasError('required') &&
+                                loginForm.get('email').hasError('email')">
                         Please enter a valid email address
                     </mat-error>
                 </mat-form-field>
 
                 <mat-form-field>
                     <input matInput type="password" placeholder="Password" formControlName="password">
-                    <mat-error *ngIf="loginFormErrors.password.required">
+                    <mat-error>
                         Password is required
                     </mat-error>
                 </mat-form-field>

src/app/main/pages/authentication/login/login.component.ts

@@ -1,7 +1,5 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 import { fuseAnimations } from '@fuse/animations';
@@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations';
     styleUrls  : ['./login.component.scss'],
     animations : fuseAnimations
 })
-export class LoginComponent implements OnInit, OnDestroy
+export class LoginComponent implements OnInit
 {
     loginForm: FormGroup;
-    loginFormErrors: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
 
     /**
      * Constructor
@@ -45,15 +39,6 @@ export class LoginComponent implements OnInit, OnDestroy
                 }
             }
         };
-
-        // Set the defaults
-        this.loginFormErrors = {
-            email   : {},
-            password: {}
-        };
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -69,50 +54,5 @@ export class LoginComponent implements OnInit, OnDestroy
             email   : ['', [Validators.required, Validators.email]],
             password: ['', Validators.required]
         });
-
-        this.loginForm.valueChanges
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                this.onLoginFormValuesChanged();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On form values changed
-     */
-    onLoginFormValuesChanged(): void
-    {
-        for ( const field in this.loginFormErrors )
-        {
-            if ( !this.loginFormErrors.hasOwnProperty(field) )
-            {
-                continue;
-            }
-
-            // Clear previous errors
-            this.loginFormErrors[field] = {};
-
-            // Get the control
-            const control = this.loginForm.get(field);
-
-            if ( control && control.dirty && !control.valid )
-            {
-                this.loginFormErrors[field] = control.errors;
-            }
-        }
     }
 }

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

@@ -59,8 +59,8 @@
                     <mat-error *ngIf="registerForm.get('passwordConfirm').hasError('required')">
                         Password confirmation is required
                     </mat-error>
-                    <mat-error *ngIf="!registerForm.get('passwordConfirm').hasError('required')
+                    <mat-error *ngIf="!registerForm.get('passwordConfirm').hasError('required') &&
-                            && registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
+                                       registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
                         Passwords must match
                     </mat-error>
                 </mat-form-field>

src/app/main/pages/authentication/register/register.component.html

@@ -41,8 +41,8 @@
                     <mat-error *ngIf="registerForm.get('passwordConfirm').hasError('required')">
                         Password confirmation is required
                     </mat-error>
-                    <mat-error *ngIf="!registerForm.get('passwordConfirm').hasError('required')
+                    <mat-error *ngIf="!registerForm.get('passwordConfirm').hasError('required') &&
-                            && registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
+                                       registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
                         Passwords must match
                     </mat-error>
                 </mat-form-field>

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

@@ -52,8 +52,8 @@
                     <mat-error *ngIf="resetPasswordForm.get('passwordConfirm').hasError('required')">
                         Password confirmation is required
                     </mat-error>
-                    <mat-error *ngIf="!resetPasswordForm.get('passwordConfirm').hasError('required')
+                    <mat-error *ngIf="!resetPasswordForm.get('passwordConfirm').hasError('required') &&
-                            && resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
+                                       resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
                         Passwords must match
                     </mat-error>
                 </mat-form-field>

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

@@ -34,8 +34,8 @@
                     <mat-error *ngIf="resetPasswordForm.get('passwordConfirm').hasError('required')">
                         Password confirmation is required
                     </mat-error>
-                    <mat-error *ngIf="!resetPasswordForm.get('passwordConfirm').hasError('required')
+                    <mat-error *ngIf="!resetPasswordForm.get('passwordConfirm').hasError('required') &&
-                            && resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
+                                       resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
                         Passwords must match
                     </mat-error>
                 </mat-form-field>