projects/common/lib/components/email/email.component.ts
TODO DOCUMENT NEED TO USE NGMODEL FOR REQUIRED TO WORK. Also test with reactive forms to see if still nec
| selector | common-email |
| styleUrls | ./email.component.scss |
| templateUrl | ./email.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
Accessors |
constructor(controlDir: NgControl)
|
||||||
|
Parameters :
|
| label | |
Type : string
|
|
Default value : 'Email'
|
|
| labelforId | |
Type : string
|
|
Default value : 'email_' + this.objectId
|
|
| maxlength | |
Type : string
|
|
Default value : '255'
|
|
| required | |
Type : boolean
|
|
Default value : false
|
|
| value | |
Type : string
|
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
AbstractFormControl
|
|
|
Defined in
AbstractFormControl:16
|
|
| errorMessage | |
Type : ErrorMessage
|
|
|
Inherited from
AbstractFormControl
|
|
|
Defined in
AbstractFormControl:19
|
|
| label | |
Type : string
|
|
|
Inherited from
AbstractFormControl
|
|
|
Defined in
AbstractFormControl:14
|
|
| blur | |
Type : EventEmitter<any>
|
|
| valueChange | |
Type : EventEmitter<string>
|
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onBlur | ||||||
onBlur(event: any)
|
||||||
|
Parameters :
Returns :
void
|
| onValueChange | ||||||
onValueChange(value: any)
|
||||||
|
Parameters :
Returns :
void
|
| Private validateSelf |
validateSelf()
|
|
Returns :
ValidationErrors | null
|
| writeValue | ||||||
writeValue(value: any)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
AbstractFormControl
|
|
Defined in
AbstractFormControl:27
|
|
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Inherited from
AbstractFormControl
|
||||||
|
Defined in
AbstractFormControl:35
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Inherited from
AbstractFormControl
|
||||||
|
Defined in
AbstractFormControl:40
|
||||||
|
Parameters :
Returns :
void
|
| Protected registerValidation | ||||||||||||
registerValidation(ngControl: NgControl, fn: ValidationErrors)
|
||||||||||||
|
Inherited from
AbstractFormControl
|
||||||||||||
|
Defined in
AbstractFormControl:68
|
||||||||||||
|
Register self validating method
Parameters :
Returns :
any
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Inherited from
AbstractFormControl
|
||||||
|
Defined in
AbstractFormControl:45
|
||||||
|
Parameters :
Returns :
void
|
| Protected setErrorMsg |
setErrorMsg()
|
|
Inherited from
AbstractFormControl
|
|
Defined in
AbstractFormControl:49
|
|
Returns :
void
|
| Private validateLabel |
validateLabel()
|
|
Inherited from
AbstractFormControl
|
|
Defined in
AbstractFormControl:88
|
|
Returns :
void
|
| Abstract writeValue | ||||||
writeValue(value: any)
|
||||||
|
Inherited from
AbstractFormControl
|
||||||
|
Defined in
AbstractFormControl:32
|
||||||
|
Parameters :
Returns :
void
|
| Private _asciiPrintable |
Type : RegExp
|
Default value : /^[ -~]+$/
|
| _defaultErrMsg |
Type : ErrorMessage
|
Default value : {
required: `${LabelReplacementTag} is required.`,
invalidEmail: `${LabelReplacementTag} must be properly formatted (e.g. name@domain.com)`,
invalidChars: `${LabelReplacementTag} must contain letters, numbers and/or symbols(e.g. #, @, !).`
}
|
| Private _formatCriteria |
Type : RegExp
|
Default value : /^(\S+)@(\S+)\.(\S+)$/
|
| Public controlDir |
Type : NgControl
|
Decorators :
@Optional()
|
Type : string
|
Default value : ''
|
| Abstract _defaultErrMsg |
Type : ErrorMessage
|
Default value : {}
|
|
Inherited from
AbstractFormControl
|
|
Defined in
AbstractFormControl:11
|
| _onChange |
Default value : () => {...}
|
|
Inherited from
AbstractFormControl
|
|
Defined in
AbstractFormControl:23
|
| _onTouched |
Default value : () => {...}
|
|
Inherited from
AbstractFormControl
|
|
Defined in
AbstractFormControl:24
|
| Public objectId |
Type : string
|
Default value : UUID.UUID()
|
|
Inherited from
Base
|
|
Defined in
Base:11
|
|
An identifier for parents to keep track of components |
| value | ||||||
getvalue()
|
||||||
setvalue(val: string)
|
||||||
|
Parameters :
Returns :
void
|
import {
Component,
Input,
Optional,
Self,
Output,
EventEmitter,
OnInit } from '@angular/core';
import { NgControl, ValidationErrors } from '@angular/forms';
import { AbstractFormControl } from '../../models/abstract-form-control';
import { ErrorMessage, LabelReplacementTag } from '../../models/error-message.interface';
/**
* TODO DOCUMENT NEED TO USE NGMODEL FOR REQUIRED TO WORK. Also test with reactive forms to see if still nec
*/
@Component({
selector: 'common-email',
templateUrl: './email.component.html',
styleUrls: ['./email.component.scss']
})
export class EmailComponent extends AbstractFormControl implements OnInit {
@Input() label: string = 'Email';
@Input() maxlength: string = '255';
@Input() labelforId: string = 'email_' + this.objectId;
@Input() required: boolean = false;
@Input()
set value( val: string ) {
if ( val ) {
this.email = val;
}
}
get value() {
return this.email;
}
@Output() valueChange: EventEmitter<string> = new EventEmitter<string>();
@Output() blur: EventEmitter<any> = new EventEmitter<any>();
email: string = '';
_defaultErrMsg: ErrorMessage = {
required: `${LabelReplacementTag} is required.`,
invalidEmail: `${LabelReplacementTag} must be properly formatted (e.g. name@domain.com)`,
invalidChars: `${LabelReplacementTag} must contain letters, numbers and/or symbols(e.g. #, @, !).`
};
private _formatCriteria: RegExp = /^(\S+)@(\S+)\.(\S+)$/;
private _asciiPrintable: RegExp = /^[ -~]+$/;
constructor( @Optional() @Self() public controlDir: NgControl ) {
super();
if ( controlDir ) {
controlDir.valueAccessor = this;
}
}
ngOnInit() {
super.ngOnInit();
this.registerValidation( this.controlDir, this.validateSelf );
}
onValueChange( value: any ) {
this.email = value;
this._onChange( value );
this.valueChange.emit( value );
}
onBlur( event: any ) {
this._onTouched( event );
this.blur.emit( event.target.value );
}
writeValue( value: any ): void {
if ( value ) {
this.email = value;
}
}
private validateSelf(): ValidationErrors | null {
if ( this.email ) {
let result = this._formatCriteria.test( this.email );
if ( result ) {
result = this._asciiPrintable.test( this.email );
return result ? null : { invalidChars: true };
}
return { invalidEmail: true };
}
return null;
}
}
<label for="{{labelforId}}" class="control-label">{{label}}</label>
<input type="text"
class="form-control"
id="{{labelforId}}"
[value]="email"
(change)="onValueChange( $event.target.value )"
(blur)="onBlur( $event )"
[disabled]="disabled"
[required]="required"
[attr.maxlength]="maxlength"
autocomplete="off" />
<!-- Error messages for component -->
<common-error-container [displayError]="controlDir && !disabled && (controlDir.dirty || controlDir.touched) && controlDir?.errors">
<div *ngIf="controlDir?.errors?.required">
{{_defaultErrMsg.required}}
</div>
<div *ngIf="controlDir?.errors?.invalidEmail">
{{_defaultErrMsg.invalidEmail}}
</div>
<div *ngIf="controlDir?.errors?.invalidChars">
{{_defaultErrMsg.invalidChars}}
</div>
</common-error-container>