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

(Coming Soon) Simplified the form error messages

Browse Source
This commit is contained in:
sercan 2018-10-04 12:21:46 +03:00
parent 98297ea787
commit 63bd95ea1e
2 changed files with 5 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/main/pages/coming-soon/coming-soon.component.html
View File

@ -28,10 +28,11 @@
<mat-form-field appearance="outline">
<mat-label>Email</mat-label>
<input matInput formControlName="email">
<mat-error *ngIf="comingSoonFormErrors.email.required">
<mat-error *ngIf="comingSoonForm.get('email').hasError('required')">
Email is required
</mat-error>
<mat-error *ngIf="!comingSoonFormErrors.email.required && comingSoonFormErrors.email.email">
<mat-error *ngIf="!comingSoonForm.get('email').hasError('required') &&
comingSoonForm.get('email').hasError('email')">
Please enter a valid email address
</mat-error>
</mat-form-field>

63
src/app/main/pages/coming-soon/coming-soon.component.ts
View File

@ -1,7 +1,5 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnInit, ViewEncapsulation } 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';
@ -13,13 +11,9 @@ import { fuseAnimations } from '@fuse/animations';
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class ComingSoonComponent implements OnInit, OnDestroy
export class ComingSoonComponent implements OnInit
{
comingSoonForm: FormGroup;
comingSoonFormErrors: any;
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
@ -49,14 +43,6 @@ export class ComingSoonComponent implements OnInit, OnDestroy
}
}
};
// Set the defaults
this.comingSoonFormErrors = {
email: {}
};
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
@ -71,50 +57,5 @@ export class ComingSoonComponent implements OnInit, OnDestroy
this.comingSoonForm = this._formBuilder.group({
email: ['', [Validators.required, Validators.email]]
});
this.comingSoonForm.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.onRegisterFormValuesChanged();
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* On form values changed
*/
onRegisterFormValuesChanged(): void
{
for ( const field in this.comingSoonFormErrors )
{
if ( !this.comingSoonFormErrors.hasOwnProperty(field) )
{
continue;
}
// Clear previous errors
this.comingSoonFormErrors[field] = {};
// Get the control
const control = this.comingSoonForm.get(field);
if ( control && control.dirty && !control.valid )
{
this.comingSoonFormErrors[field] = control.errors;
}
}
}
}