From 4cb01dc14c78b5cd60cc41947f22a453bb483be8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?=
 <cagatay.civici@github.com>
Date: Thu, 24 Nov 2016 16:55:50 +0300
Subject: [PATCH] Fixed #1420

---
 components/radiobutton/radiobutton.ts | 30 ++++++++++++++++++---------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/radiobutton/radiobutton.ts b/components/radiobutton/radiobutton.ts
index 3ce6b698dd1..b6ed9913f38 100644
--- a/components/radiobutton/radiobutton.ts
+++ b/components/radiobutton/radiobutton.ts
@@ -1,4 +1,4 @@
-import {NgModule,Component,Input,Output,EventEmitter,forwardRef} from '@angular/core';
+import {NgModule,Component,Input,Output,AfterViewInit,ElementRef,EventEmitter,forwardRef,ViewChild} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 
@@ -13,20 +13,20 @@ export const RADIO_VALUE_ACCESSOR: any = {
     template: `
         <div class="ui-radiobutton ui-widget">
             <div class="ui-helper-hidden-accessible">
-                <input type="radio" [attr.name]="name" [attr.value]="value" [checked]="checked" (change)="onChange($event)"
+                <input #rb type="radio" [attr.name]="name" [attr.value]="value" [checked]="checked" (change)="onChange($event)"
                     (focus)="onFocus($event)" (blur)="onBlur($event)">
             </div>
             <div (click)="handleClick()" (mouseenter)="hover=true" (mouseleave)="hover=false"
                 [ngClass]="{'ui-radiobutton-box ui-widget ui-state-default':true,
-                'ui-state-hover':hover&&!disabled,'ui-state-active':checked,'ui-state-disabled':disabled,'ui-state-focus':focused}">
-                <span class="ui-radiobutton-icon" [ngClass]="{'fa fa-fw fa-circle':checked}"></span>
+                'ui-state-hover':hover&&!disabled,'ui-state-active':rb.checked,'ui-state-disabled':disabled,'ui-state-focus':focused}">
+                <span class="ui-radiobutton-icon" [ngClass]="{'fa fa-fw fa-circle':rb.checked}"></span>
             </div>
         </div>
         <label class="ui-radiobutton-label" (click)="select()" *ngIf="label">{{label}}</label>
     `,
     providers: [RADIO_VALUE_ACCESSOR]
 })
-export class RadioButton implements ControlValueAccessor {
+export class RadioButton implements ControlValueAccessor,AfterViewInit {
 
     @Input() value: any;
 
@@ -38,8 +38,10 @@ export class RadioButton implements ControlValueAccessor {
 
     @Output() onClick: EventEmitter<any> = new EventEmitter();
     
-    public model: any;
+    @ViewChild('rb') inputViewChild: ElementRef;
     
+    public input: HTMLInputElement;
+        
     public onModelChange: Function = () => {};
     
     public onModelTouched: Function = () => {};
@@ -49,6 +51,10 @@ export class RadioButton implements ControlValueAccessor {
     public hover: boolean;
     
     public focused: boolean;
+    
+    ngAfterViewInit() {
+        this.input = <HTMLInputElement> this.inputViewChild.nativeElement;
+    }
 
     handleClick() {
         if(!this.disabled) {
@@ -59,14 +65,18 @@ export class RadioButton implements ControlValueAccessor {
     
     select() {
         if(!this.disabled) {
+            this.input.checked = true;
             this.checked = true;
             this.onModelChange(this.value);
         }
     }
             
-    writeValue(model: any) : void {
-        this.model = model;
-        this.checked = (this.model == this.value);
+    writeValue(value: any) : void {
+        this.checked = (value == this.value);
+        
+        if(this.input) {
+            this.input.checked = this.checked;
+        }
     }
     
     registerOnChange(fn: Function): void {
@@ -90,7 +100,7 @@ export class RadioButton implements ControlValueAccessor {
         this.onModelTouched();
     }
     
-    onChange(event) {
+    onChange(event,rb) {
         this.select();
     }
 }