projects/common/lib/components/radio/radio.component.ts
| selector | common-radio |
| styleUrls | ./radio.component.scss |
| templateUrl | ./radio.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
Accessors |
constructor(controlDir: NgControl)
|
||||||
|
Parameters :
|
| display | |
Type : "table-row-group" | "inline-block"
|
|
Default value : 'inline-block'
|
|
| instructionText | |
Type : string
|
|
| label | |
Type : string
|
|
| radioLabels | |
Type : IRadioItems[]
|
|
Default value : [
{label: 'No', value: false},
{label: 'Yes', value: true}
]
|
|
| required | |
Type : boolean
|
|
Default value : false
|
|
| value | |
Type : any
|
|
| 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
|
|
| valueChange | |
Type : EventEmitter<any>
|
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| setStatus | ||||||
setStatus(val: 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.`
}
|
| _value |
Type : any
|
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: any)
|
||||||
|
Parameters :
Returns :
void
|
import { Component, EventEmitter, Input, Output, Optional, Self, OnInit } from '@angular/core';
import { AbstractFormControl } from '../../models/abstract-form-control';
import { LabelReplacementTag, ErrorMessage } from '../../models/error-message.interface';
import { NgControl } from '@angular/forms';
/**
* RadioComponent is a single radio which can be used to have multiple radios
* based on the radio label values.
*
* To display radio in a vertical style use display="table-row-group" by default
* it shows in horizontal or inline display, display='inline-block' You can
* have many radio's and the number is based on the Radio label Value. For 3
* radio buttons, radioLabels value is of type IRadioItems[].
*
* @example
*
* Reactive Form
* <common-radio name='choice'
* label='Do you live in Canada'
* display='table-row-group'
* [radioLabels]=='[{label: "No", value: false},{label: "Yes", value: true}]'
* FormControlName='choice'>
* </common-radio>
*
* Template Form
* <common-radio name='ageCategory'
* [(ngModel)]="age"
* label='How old are you?'
* display='table-row-group'
* [radioLabels]='[{label: "0-18 years", value: 0},{label: "19 years and older", value: 1}]'>
* </common-radio>
*
* @export
*
*/
export interface IRadioItems {
label: string;
value: any;
// TODO: Make value generic <T>
}
@Component({
selector: 'common-radio',
templateUrl: './radio.component.html',
styleUrls: ['./radio.component.scss']
})
export class RadioComponent extends AbstractFormControl implements OnInit {
_value: any = '';
_defaultErrMsg: ErrorMessage = {
required: `${LabelReplacementTag} is required.`
};
@Input() radioLabels: IRadioItems[] = [
{label: 'No', value: false},
{label: 'Yes', value: true}
];
@Input() required: boolean = false;
@Input() label: string;
@Input()
set value( val: any ) {
this._value = val;
}
get value() {
return this._value;
}
@Input() display: 'table-row-group' | 'inline-block' = 'inline-block';
@Input() instructionText: string;
@Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
constructor( @Optional() @Self() public controlDir: NgControl ) {
super();
if ( controlDir ) {
controlDir.valueAccessor = this;
}
}
ngOnInit() {
super.ngOnInit();
}
setStatus(val: any) {
this._value = val;
this._onChange(val);
this._onTouched();
this.valueChange.emit(val);
}
registerOnChange(fn: any): void {
this._onChange = fn;
}
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
writeValue(value: any): void {
this._value = value;
}
}
<fieldset>
<legend *ngIf="label; else noLabel;" class="radio-box--legend" tabindex="-1">{{label}}</legend>
<div class="text-muted" *ngIf="instructionText; else noInstructionText;" >{{instructionText}}</div>
<div *ngFor="let val of radioLabels" [ngStyle]="{'display': display}" >
<div class="md-radio">
<input type="radio"
name="selection__{{objectId}}"
id="{{val.value}}_{{objectId}}"
[disabled]="disabled"
[value]="val.value"
(click)="setStatus(val.value);"
[checked]="_value == val.value"
[required]="required"
tabindex="0">
<label for="{{val.value}}_{{objectId}}">
{{val.label}}
</label>
</div>
</div>
<common-error-container
[displayError]="controlDir && !disabled && (controlDir.touched || controlDir.dirty) && controlDir?.errors">
<div *ngIf="controlDir?.errors?.required">{{_defaultErrMsg.required}}</div>
</common-error-container>
</fieldset>
<ng-template #noLabel>
<legend class="radio-box--legend" tabindex="-1">
<ng-content></ng-content>
</legend>
</ng-template>
<ng-template #noInstructionText>
<ng-content></ng-content>
</ng-template>