From 6ea39b50c53c2a1b26ec1ada02656f29106140a3 Mon Sep 17 00:00:00 2001 From: thecontrarycat Date: Fri, 23 Sep 2016 15:27:26 +0100 Subject: [PATCH 1/4] Update radio button directive to work with ReactiveForms --- components/buttons/button-radio.directive.ts | 102 +++++++++---------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/components/buttons/button-radio.directive.ts b/components/buttons/button-radio.directive.ts index 4218cabe92..624b0a0052 100644 --- a/components/buttons/button-radio.directive.ts +++ b/components/buttons/button-radio.directive.ts @@ -1,67 +1,67 @@ import { - Directive, ElementRef, HostBinding, HostListener, Input, OnInit, Self + Directive, ElementRef, HostBinding, forwardRef, HostListener, Input, OnInit, Self } from '@angular/core'; -import { ControlValueAccessor, NgModel } from '@angular/forms'; +import { ControlValueAccessor, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms'; -// TODO: if uncheckable, null should be set to ngModel -// if disabled, button should not be checkable +export const RADIO_CONTROL_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ButtonRadioDirective), + multi: true +}; -@Directive({selector: '[btnRadio][ngModel]'}) +@Directive({ selector: '[btnRadio]', providers: [RADIO_CONTROL_VALUE_ACCESSOR] }) export class ButtonRadioDirective implements ControlValueAccessor, OnInit { - public cd:NgModel; - public el:ElementRef; + + public onChange:any = Function.prototype; + public onTouched:any = Function.prototype; - public onChange:any = Function.prototype; - public onTouched:any = Function.prototype; + @Input() private btnRadio:any; + @Input() private uncheckable:boolean; + @Input() private value:any; - @Input() private btnRadio:string; - @Input() private uncheckable:boolean; - - @HostBinding('class.active') - public get isActive():boolean { - return this.btnRadio === this.value; - } - - @HostListener('click') - public onClick():void { - if (this.uncheckable && this.btnRadio === this.value) { - return this.cd.viewToModelUpdate(void 0); + @HostBinding('class.active') + public get isActive(): boolean { + return this.btnRadio === this.value; } - this.cd.viewToModelUpdate(this.btnRadio); - } + @HostListener('click') + public onClick(): void { + if (this.el.nativeElement.attributes.disabled) { + return; + } - public constructor(@Self() cd:NgModel, el:ElementRef) { - // hack! - this.cd = cd; - this.el = el; - cd.valueAccessor = this; - } + if (this.uncheckable && this.btnRadio === this.value) { + this.value = null; + } else { + this.value = this.btnRadio; + } - public ngOnInit():void { - this.uncheckable = typeof this.uncheckable !== 'undefined'; - } + this.onTouched(); + this.onChange(this.value); + } + + public constructor( private el: ElementRef) { + } - // hack view model! - protected get value():any { - return this.cd.viewModel; - } + public ngOnInit(): void { + this.uncheckable = typeof this.uncheckable !== 'undefined'; + } - protected set value(value:any) { - this.cd.viewModel = value; - } + public onBlur() { + this.onTouched(); + } - // ControlValueAccessor - // model -> view - public writeValue(value:any):void { - this.value = value; - } + // ControlValueAccessor + // model -> view + public writeValue(value: any): void { + this.value = value; + } - public registerOnChange(fn:(_:any) => {}):void { - this.onChange = fn; - } + public registerOnChange(fn: any): void { + this.onChange = fn; + } - public registerOnTouched(fn:() => {}):void { - this.onTouched = fn; - } -} + public registerOnTouched(fn: any): void { + this.onTouched = fn; + } +} \ No newline at end of file From 886b9fe904caa2d41e1ec01df532ef7a72253004 Mon Sep 17 00:00:00 2001 From: thecontrarycat Date: Fri, 23 Sep 2016 16:06:34 +0100 Subject: [PATCH 2/4] Fix linting issues, except for forwardRef which is required for ControlValueAccessor --- components/buttons/button-radio.directive.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/buttons/button-radio.directive.ts b/components/buttons/button-radio.directive.ts index 624b0a0052..52b9489855 100644 --- a/components/buttons/button-radio.directive.ts +++ b/components/buttons/button-radio.directive.ts @@ -1,7 +1,7 @@ import { - Directive, ElementRef, HostBinding, forwardRef, HostListener, Input, OnInit, Self + Directive, ElementRef, HostBinding, forwardRef, HostListener, Input, OnInit } from '@angular/core'; -import { ControlValueAccessor, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; export const RADIO_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -11,7 +11,7 @@ export const RADIO_CONTROL_VALUE_ACCESSOR: any = { @Directive({ selector: '[btnRadio]', providers: [RADIO_CONTROL_VALUE_ACCESSOR] }) export class ButtonRadioDirective implements ControlValueAccessor, OnInit { - + public onChange:any = Function.prototype; public onTouched:any = Function.prototype; @@ -47,7 +47,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit { this.uncheckable = typeof this.uncheckable !== 'undefined'; } - public onBlur() { + public onBlur() : void { this.onTouched(); } @@ -64,4 +64,4 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit { public registerOnTouched(fn: any): void { this.onTouched = fn; } -} \ No newline at end of file +} From 6f5f63256b48351f81f5ab8297e60350b703dc02 Mon Sep 17 00:00:00 2001 From: thecontrarycat Date: Fri, 23 Sep 2016 16:11:50 +0100 Subject: [PATCH 3/4] Further linting fixes --- components/buttons/button-radio.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/buttons/button-radio.directive.ts b/components/buttons/button-radio.directive.ts index 52b9489855..1b78c667dd 100644 --- a/components/buttons/button-radio.directive.ts +++ b/components/buttons/button-radio.directive.ts @@ -31,7 +31,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit { } if (this.uncheckable && this.btnRadio === this.value) { - this.value = null; + this.value = undefined } else { this.value = this.btnRadio; } @@ -47,7 +47,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit { this.uncheckable = typeof this.uncheckable !== 'undefined'; } - public onBlur() : void { + public onBlur(): void { this.onTouched(); } From 9b443a714687fd16f8a9ab649e0cd2288169f910 Mon Sep 17 00:00:00 2001 From: thecontrarycat Date: Fri, 23 Sep 2016 16:20:57 +0100 Subject: [PATCH 4/4] Further linting fixes --- components/buttons/button-radio.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/buttons/button-radio.directive.ts b/components/buttons/button-radio.directive.ts index 1b78c667dd..1168b4a9ec 100644 --- a/components/buttons/button-radio.directive.ts +++ b/components/buttons/button-radio.directive.ts @@ -31,7 +31,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit { } if (this.uncheckable && this.btnRadio === this.value) { - this.value = undefined + this.value = undefined; } else { this.value = this.btnRadio; }