purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-03-09 11:02:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Used native .hasError checks on template
This commit is contained in:
Sercan Yemen 2018-06-28 20:34:43 +03:00
parent 85226e6094
commit fd4da1e060
14 changed files with 33 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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;
}
}
}
}

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

@ -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>

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

@ -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;
}
}
}
}

2
src/app/main/pages/authentication/lock/lock.component.html
View File

@ -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>

64
src/app/main/pages/authentication/lock/lock.component.ts
View File

@ -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;
}
}
}
}

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

@ -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>

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

@ -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;
}
}
}
}

8
src/app/main/pages/authentication/login/login.component.html
View File

@ -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>

64
src/app/main/pages/authentication/login/login.component.ts
View File

@ -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;
}
}
}
}

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

@ -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')
&& registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
<mat-error *ngIf="!registerForm.get('passwordConfirm').hasError('required') &&
registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
Passwords must match
</mat-error>
</mat-form-field>

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

@ -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')
&& registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
<mat-error *ngIf="!registerForm.get('passwordConfirm').hasError('required') &&
registerForm.get('passwordConfirm').hasError('passwordsNotMatching')">
Passwords must match
</mat-error>
</mat-form-field>

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

@ -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')
&& resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
<mat-error *ngIf="!resetPasswordForm.get('passwordConfirm').hasError('required') &&
resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
Passwords must match
</mat-error>
</mat-form-field>

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

@ -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')
&& resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
<mat-error *ngIf="!resetPasswordForm.get('passwordConfirm').hasError('required') &&
resetPasswordForm.get('passwordConfirm').hasError('passwordsNotMatching')">
Passwords must match
</mat-error>
</mat-form-field>