projects/common/lib/components/city/city.component.ts
| selector | common-city |
| templateUrl | ./city.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
Accessors |
constructor(controlDir: NgControl)
|
||||||
|
Parameters :
|
| label | |
Type : string
|
|
Default value : 'City'
|
|
| labelforId | |
Type : string
|
|
Default value : 'city_' + this.objectId
|
|
| maxlength | |
Type : string
|
|
Default value : '100'
|
|
| placeholder | |
Type : string
|
|
Default value : 'City name'
|
|
| 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: string)
|
||||||
|
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(value: string)
|
||||||
|
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.',
invalidChar: LabelReplacementTag + ' must contain letters and may include numbers and special characters ' +
'such as hyphens, periods, apostrophes and blank characters.',
maxlength: LabelReplacementTag + ' exceeds the maximum number of allowable characters.'
}
|
| city |
Type : string
|
Default value : ''
|
| Public controlDir |
Type : NgControl
|
Decorators :
@Optional()
|
| 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
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, magnam ipsam. Sit quasi natus architecto rerum unde non provident! Quia nisi facere amet iste mollitia voluptatem non molestias esse optio?
Aperiam fugiat consectetur temporibus, iste repellat, quisquam sapiente nisi distinctio optio, autem nemo tenetur error eum voluptatibus ab accusamus quis voluptatum blanditiis. Quam et ut reprehenderit vitae nobis, at ipsum!
Exercitationem pariatur animi repudiandae corporis obcaecati ratione ducimus beatae quam, nostrum magnam unde numquam quidem cupiditate odit id. Beatae alias molestiae, optio incidunt harum quia voluptates deserunt sequi. Nesciunt, optio.
import { Component, OnInit, Input, Output, EventEmitter, Optional, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { AbstractFormControl } from '../../models/abstract-form-control';
import { ErrorMessage, LabelReplacementTag } from '../../models/error-message.interface';
@Component({
selector: 'common-city',
templateUrl: './city.component.html',
})
export class CityComponent extends AbstractFormControl implements OnInit, ControlValueAccessor {
@Input() label: string = 'City';
@Input() maxlength: string = '100';
@Input() labelforId: string = 'city_' + this.objectId;
@Input() placeholder: string = 'City name';
@Input() required: boolean = false;
@Input()
set value( val: string ) {
if ( val ) {
this.city = val;
}
}
get value() {
return this.city;
}
@Output() valueChange: EventEmitter<string> = new EventEmitter<string>();
@Output() blur: EventEmitter<any> = new EventEmitter<any>();
city: string = '';
_defaultErrMsg: ErrorMessage = {
required: LabelReplacementTag + ' is required.',
invalidChar: LabelReplacementTag + ' must contain letters and may include numbers and special characters ' +
'such as hyphens, periods, apostrophes and blank characters.',
maxlength: LabelReplacementTag + ' exceeds the maximum number of allowable characters.'
};
constructor( @Optional() @Self() public controlDir: NgControl ) {
super();
if ( controlDir ) {
controlDir.valueAccessor = this;
}
}
ngOnInit() {
super.ngOnInit();
}
onValueChange( value: string ) {
this.city = value;
this._onChange( value );
this.valueChange.emit( value );
}
onBlur( event: any ) {
this._onTouched( event );
this.blur.emit( event );
}
writeValue( value: string ): void {
if ( value !== undefined ) {
this.city = value;
}
}
}
<label for="{{labelforId}}">{{label}}</label>
<input class="form-control"
spellcheck="false"
type="text"
id="{{labelforId}}"
[value]="city"
(change)="onValueChange($event.target.value)"
(blur)="onBlur($event)"
[disabled]="disabled"
[required]="required"
[attr.maxlength]="maxlength"
[placeholder]="placeholder"
autocomplete="off"/>
<!-- Error messages for input -->
<common-error-container
[displayError]="controlDir && !disabled && (controlDir.touched || controlDir.dirty) && controlDir.errors">
<div *ngIf="controlDir.errors?.required">
{{_defaultErrMsg.required}}
</div>
<div *ngIf="controlDir.errors?.invalidChar">
{{_defaultErrMsg.invalidChar}}
</div>
<div *ngIf="controlDir.errors?.maxlength">
{{_defaultErrMsg.maxlength}}
</div>
</common-error-container>