projects/common/lib/components/province/province.component.ts
| selector | common-province |
| styleUrls | ./province.component.scss |
| templateUrl | ./province.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
Accessors |
constructor(controlDir: NgControl)
|
||||||
|
Parameters :
|
| label | |
Type : string
|
|
Default value : 'Province'
|
|
| labelforId | |
Type : string
|
|
Default value : 'province_' + this.objectId
|
|
| maxlength | |
Type : string
|
|
Default value : '250'
|
|
| placeholder | |
Type : string
|
|
Default value : 'Please select a province'
|
|
| provinceList | |
Type : ProvinceList[]
|
|
Default value : PROVINCE_LIST
|
|
| required | |
Type : boolean
|
|
Default value : false
|
|
| useDropDownList | |
Type : boolean
|
|
Default value : true
|
|
| 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
|
| 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.',
invalidChar: LabelReplacementTag + ' must contain letters and may include special characters such as hyphens, ' +
'periods, apostrophes and blank characters.'
}
|
| Public controlDir |
Type : NgControl
|
Decorators :
@Optional()
|
| province |
Type : string
|
| 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, Input, Output, EventEmitter, Optional, Self, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';
import { CANADA } from '../country/country.component';
import { AbstractFormControl } from '../../models/abstract-form-control';
import { ErrorMessage, LabelReplacementTag } from '../../models/error-message.interface';
export const BRITISH_COLUMBIA = 'BC';
export interface ProvinceList {
provinceCode: string;
description: string;
country: string;
}
export const PROVINCE_LIST: ProvinceList[] = [
{ provinceCode: 'AB', description: 'Alberta', country: CANADA },
{ provinceCode: 'BC', description: 'British Columbia', country: CANADA },
{ provinceCode: 'MB', description: 'Manitoba', country: CANADA },
{ provinceCode: 'NB', description: 'New Brunswick', country: CANADA },
{ provinceCode: 'NL', description: 'Newfoundland and Labrador', country: CANADA },
{ provinceCode: 'NS', description: 'Nova Scotia', country: CANADA },
{ provinceCode: 'ON', description: 'Ontario', country: CANADA },
{ provinceCode: 'PE', description: 'Prince Edward Island', country: CANADA },
{ provinceCode: 'QC', description: 'Quebec', country: CANADA },
{ provinceCode: 'SK', description: 'Saskatchewan', country: CANADA },
{ provinceCode: 'NT', description: 'Northwest Territories', country: CANADA },
{ provinceCode: 'NU', description: 'Nunavut', country: CANADA },
{ provinceCode: 'YT', description: 'Yukon', country: CANADA }
];
export function getProvinceDescription( provinceCode: string ) {
const provObj = PROVINCE_LIST.find( val => provinceCode === val.provinceCode && CANADA === val.country );
return provObj ? provObj.description : provinceCode;
}
@Component({
selector: 'common-province',
templateUrl: './province.component.html',
styleUrls: ['./province.component.scss']
})
export class ProvinceComponent extends AbstractFormControl implements OnInit {
@Input() label: string = 'Province';
@Input() provinceList: ProvinceList[] = PROVINCE_LIST;
@Input() labelforId: string = 'province_' + this.objectId;
@Input() required: boolean = false;
@Input() placeholder: string = 'Please select a province';
@Input() maxlength: string = '250';
@Input() useDropDownList: boolean = true;
@Input()
set value( val: string ) {
if ( val ) {
this.province = val;
}
}
get value() {
return this.province;
}
@Output() valueChange: EventEmitter<string> = new EventEmitter<string>();
@Output() blur: EventEmitter<any> = new EventEmitter<any>();
province: string;
_defaultErrMsg: ErrorMessage = {
required: LabelReplacementTag + ' is required.',
invalidChar: LabelReplacementTag + ' must contain letters and may include special characters such as hyphens, ' +
'periods, apostrophes and blank characters.'
};
constructor( @Optional() @Self() public controlDir: NgControl ) {
super();
if ( controlDir ) {
controlDir.valueAccessor = this;
}
}
ngOnInit() {
super.ngOnInit();
}
onValueChange( value: any ) {
if ( value !== this.province ) {
this._onChange( value );
this.valueChange.emit( value );
this.province = value;
}
}
onBlur( event: any ) {
this._onTouched( event );
this.blur.emit( event );
}
writeValue( value: any ): void {
if ( value !== undefined ) {
this.province = value;
}
}
}
<label for="{{labelforId}}" class="control-label">{{label}}</label>
<div *ngIf="useDropDownList; else NotDropDownList">
<ng-select [items]="provinceList"
[ngModel]="province"
(ngModelChange)="onValueChange($event)"
(blur)="onBlur($event)"
[required]="required"
[disabled]="disabled"
labelForId="{{labelforId}}"
bindValue="provinceCode"
bindLabel="description"
[clearable]="!required"
placeholder="{{ placeholder }}"></ng-select>
</div>
<!-- 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>
</common-error-container>
<ng-template #NotDropDownList>
<input class="form-control"
spellcheck="false"
type="text"
id="{{labelforId}}"
[value]="province"
(change)="onValueChange($event.target.value)"
(blur)="onBlur($event)"
[disabled]="disabled"
[attr.maxlength]="maxlength"
[placeholder]="placeholder"
autocomplete="off"/>
</ng-template>