projects/common/lib/components/name/name.component.ts
TODO DOCUMENT NEED TO USE NGMODEL FOR REQUIRED TO WORK. Also test with reactive forms to see if still nec
| selector | common-name |
| styleUrls | ./name.component.scss |
| templateUrl | ./name.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
Accessors |
constructor(controlDir: NgControl)
|
||||||
|
Parameters :
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
| label | |
Type : string
|
|
Default value : 'Name'
|
|
| labelforId | |
Type : string
|
|
Default value : 'name_' + 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
|
| _defaultErrMsg |
Type : ErrorMessage
|
Default value : {
required: `${LabelReplacementTag} is required.`,
invalid: LabelReplacementTag + ' must begin with a letter and cannot include special ' +
'characters except hyphens, periods, apostrophes and blank characters.',
invalidChar: `${LabelReplacementTag} must be a letter.` // for Initials when maxlength is 1
}
|
| Public controlDir |
Type : NgControl
|
Decorators :
@Optional()
|
| Public nameStr |
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
|
| maxLenAsNumber |
getmaxLenAsNumber()
|
import {
Component,
Input,
Optional,
Self,
Output,
EventEmitter,
OnInit} from '@angular/core';
import { ControlValueAccessor, NgControl, ValidationErrors } from '@angular/forms';
import { AbstractFormControl } from '../../models/abstract-form-control';
import { LabelReplacementTag, ErrorMessage } 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-name',
templateUrl: './name.component.html',
styleUrls: ['./name.component.scss']
})
export class NameComponent extends AbstractFormControl implements OnInit, ControlValueAccessor {
@Input() disabled: boolean = false;
@Input() label: string = 'Name';
@Input() maxlength: string = '255';
@Input() labelforId: string = 'name_' + this.objectId;
@Input() required: boolean = false;
@Input()
set value( val: string ) {
if ( val ) {
this.nameStr = val;
}
}
get value() {
return this.nameStr;
}
@Output() valueChange: EventEmitter<string> = new EventEmitter<string>();
@Output() blur: EventEmitter<any> = new EventEmitter<any>();
public nameStr: string = '';
_defaultErrMsg: ErrorMessage = {
required: `${LabelReplacementTag} is required.`,
invalid: LabelReplacementTag + ' must begin with a letter and cannot include special ' +
'characters except hyphens, periods, apostrophes and blank characters.',
invalidChar: `${LabelReplacementTag} must be a letter.` // for Initials when maxlength is 1
};
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.nameStr = 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.nameStr = value;
}
}
get maxLenAsNumber(): number {
return Number.parseInt( this.maxlength, 10 );
}
private validateSelf(): ValidationErrors | null {
const maxlen = Number.parseInt( this.maxlength, 10 );
if ( this.nameStr ) {
if ( maxlen > 1 ) {
// Valid characters for name
const criteria: RegExp = RegExp( '^[a-zA-Z][a-zA-Z\-.\' ]*$' );
return criteria.test( this.nameStr ) ? null : { 'invalid': true };
} else {
// Only letters for initials
const letters: RegExp = RegExp( '[a-zA-Z]*$' );
return letters.test( this.nameStr ) ? null : { 'invalidChar': true };
}
}
return null;
}
}
<label for="{{labelforId}}" class="control-label">{{label}}</label>
<input type="text"
class="form-control"
id="{{labelforId}}"
[value]="nameStr"
(change)="onValueChange( $event.target.value )"
(blur)="onBlur( $event )"
[disabled]="disabled"
[attr.maxlength]="maxlength"
[required]="required"
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?.invalid">
{{_defaultErrMsg.invalid}}
</div>
<div *ngIf="controlDir?.errors?.invalidChar">
{{_defaultErrMsg.invalidChar}}
</div>
</common-error-container>