fix(buttons): fix radio btns for reactive forms, add radio reactive demo (#3384)

fixes #2581

Author: IlyaSurmay

demo/src/app/components/+buttons/buttons-section.list.ts

@@ -1,6 +1,7 @@
 import { DemoButtonsBasicComponent } from './demos/basic/basic';
 import { DemoButtonsCheckboxComponent } from './demos/checkbox/checkbox';
 import { DemoButtonsRadioComponent } from './demos/radio/radio';
+import { DemoButtonsCheckboxReactiveFormsComponent } from './demos/checkbox-reactiveforms/checkbox-reactiveforms';
 import { DemoButtonsRadioReactiveFormsComponent } from './demos/radio-reactiveforms/radio-reactiveforms';
 import { DemoButtonsDisabledComponent } from './demos/disabled/disabled';
 
@@ -41,18 +42,30 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/checkbox/checkbox.html'),
         outlet: DemoButtonsCheckboxComponent
       },
+      {
+        title: 'Checkbox with Reactive Forms',
+        anchor: 'checkbox-reactiveforms"',
+        description: `<p>Checkbox buttons with ReactiveForms</p>`,
+        component: require('!!raw-loader?lang=typescript!./demos/checkbox-reactiveforms/checkbox-reactiveforms.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/checkbox-reactiveforms/checkbox-reactiveforms.html'),
+        outlet: DemoButtonsCheckboxReactiveFormsComponent
+      },
       {
         title: 'Radio & Uncheckable Radio',
         anchor: 'radio-button',
-        description: `<p>Radio buttons with checked/unchecked states</p>`,
+        description: `<p>Radio buttons with checked/unchecked states. Group can be created in two ways: using
+<code>btnRadioGroup</code> directive or using the same <code>ngModel</code> binding with several buttons (works only for
+template driven forms). Check the demo below for more info.</p>`,
         component: require('!!raw-loader?lang=typescript!./demos/radio/radio.ts'),
         html: require('!!raw-loader?lang=markup!./demos/radio/radio.html'),
         outlet: DemoButtonsRadioComponent
       },
       {
         title: 'Radio with Reactive Forms',
-        anchor: 'radio-reactiveforms"',
-        description: `<p>Checkbox buttons with ReactiveForms</p>`,
+        anchor: 'radio-reactiveforms',
+        description: `<p>Radio buttons with ReactiveForms. Example below shows how to use radio buttons with reactive
+ forms. Please be aware that for reactive forms it's required to use <code>btnRadioGroup</code> directive along with
+ <code>btnRadio</code>'s</p>`,
         component: require('!!raw-loader?lang=typescript!./demos/radio-reactiveforms/radio-reactiveforms.ts'),
         html: require('!!raw-loader?lang=markup!./demos/radio-reactiveforms/radio-reactiveforms.html'),
         outlet: DemoButtonsRadioReactiveFormsComponent
@@ -80,6 +93,11 @@ export const demoComponentContent: ContentSection[] = [
         title: 'ButtonRadioDirective',
         anchor: 'button-radio-directive',
         outlet: NgApiDocComponent
+      },
+      {
+        title: 'ButtonRadioGroupDirective',
+        anchor: 'button-radio-group-directive',
+        outlet: NgApiDocComponent
       }
     ]
   }

demo/src/app/components/+buttons/demos/checkbox-reactiveforms/checkbox-reactiveforms.html

@@ -0,0 +1,13 @@
+<pre class="card card-block card-header">{{myForm.value | json}}</pre>
+<form [formGroup]="myForm">
+  <div class="btn-group">
+    <label class="btn btn-primary" [class.active]="myForm.value.left"
+           btnCheckbox formControlName="left">Left</label>
+
+    <label class="btn btn-primary" [class.active]="myForm.value.middle"
+           btnCheckbox formControlName="middle">Middle</label>
+
+    <label class="btn btn-primary" [class.active]="myForm.value.right"
+           btnCheckbox formControlName="right">Right</label>
+  </div>
+</form>

demo/src/app/components/+buttons/demos/checkbox-reactiveforms/checkbox-reactiveforms.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'demo-buttons-checkbox-reactiveforms',
+  templateUrl: './checkbox-reactiveforms.html'
+})
+export class DemoButtonsCheckboxReactiveFormsComponent implements OnInit {
+  myForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.myForm = this.formBuilder.group({
+      left: false,
+      middle: true,
+      right: false
+    });
+  }
+}

demo/src/app/components/+buttons/demos/index.ts

@@ -1,13 +1,15 @@
 import { DemoButtonsBasicComponent } from './basic/basic';
 import { DemoButtonsCheckboxComponent } from './checkbox/checkbox';
 import { DemoButtonsRadioComponent } from './radio/radio';
-import { DemoButtonsRadioReactiveFormsComponent } from './radio-reactiveforms/radio-reactiveforms';
+import { DemoButtonsCheckboxReactiveFormsComponent } from './checkbox-reactiveforms/checkbox-reactiveforms';
 import { DemoButtonsDisabledComponent } from './disabled/disabled';
+import { DemoButtonsRadioReactiveFormsComponent } from './radio-reactiveforms/radio-reactiveforms';
 
 export const DEMO_COMPONENTS = [
   DemoButtonsBasicComponent,
   DemoButtonsCheckboxComponent,
   DemoButtonsRadioComponent,
+  DemoButtonsCheckboxReactiveFormsComponent,
   DemoButtonsRadioReactiveFormsComponent,
   DemoButtonsDisabledComponent
 ];

demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.html

@@ -1,13 +1,10 @@
-<pre class="card card-block card-header">{{myForm.value | json}}</pre>
-<form [formGroup]="myForm">
-  <div class="btn-group">
-    <label class="btn btn-primary" [class.active]="myForm.value.left"
-           btnCheckbox formControlName="left">Left</label>
-
-    <label class="btn btn-primary" [class.active]="myForm.value.middle"
-           btnCheckbox formControlName="middle">Middle</label>
-
-    <label class="btn btn-primary" [class.active]="myForm.value.right"
-           btnCheckbox formControlName="right">Right</label>
+<pre class="card card-block card-header">{{ myForm.value | json }}</pre>
+<form [formGroup]="myForm" class="form-inline">
+  <div class="form-group">
+    <div class="btn-group" btnRadioGroup formControlName="radio">
+      <label btnRadio="A" class="btn btn-primary">A</label>
+      <label btnRadio="B" class="btn btn-primary">B</label>
+      <label btnRadio="C" class="btn btn-primary">C</label>
+    </div>
   </div>
 </form>

demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'demo-buttons-radio-reactiveforms',
@@ -12,9 +12,7 @@ export class DemoButtonsRadioReactiveFormsComponent implements OnInit {
 
   ngOnInit() {
     this.myForm = this.formBuilder.group({
-      left: false,
-      middle: true,
-      right: false
+      radio: 'C'
     });
   }
 }

demo/src/app/components/+buttons/demos/radio/radio.html

@@ -4,8 +4,13 @@
   <label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="Middle">Middle</label>
   <label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="Right">Right</label>
 </div>
-<div class="btn-group">
-  <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="Left" uncheckable>Left</label>
-  <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="Middle" uncheckable>Middle</label>
-  <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="Right" uncheckable>Right</label>
+<div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
+  <label class="btn btn-success" btnRadio="Left">Left</label>
+  <label class="btn btn-success" btnRadio="Middle">Middle</label>
+  <label class="btn btn-success" btnRadio="Right">Right</label>
+</div>
+<div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
+  <label class="btn btn-info" btnRadio="Left" uncheckable>Left</label>
+  <label class="btn btn-info" btnRadio="Middle" uncheckable>Middle</label>
+  <label class="btn btn-info" btnRadio="Right" uncheckable>Right</label>
 </div>

demo/src/ng-api-doc.ts

@@ -323,6 +323,16 @@ export const ngdoc: any = {
     "properties": [],
     "methods": []
   },
+  "ButtonRadioGroupDirective": {
+    "fileName": "src/buttons/button-radio-group.directive.ts",
+    "className": "ButtonRadioGroupDirective",
+    "description": "<p>A group of radio buttons.\nA value of a selected button is bound to a variable specified via ngModel.</p>\n",
+    "selector": "[btnRadioGroup]",
+    "inputs": [],
+    "outputs": [],
+    "properties": [],
+    "methods": []
+  },
   "ButtonRadioDirective": {
     "fileName": "src/buttons/button-radio.directive.ts",
     "className": "ButtonRadioDirective",
@@ -334,6 +344,11 @@ export const ngdoc: any = {
         "type": "any",
         "description": "<p>Radio button value, will be set to <code>ngModel</code> </p>\n"
       },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "description": "<p>If <code>true</code> — radio button is disabled </p>\n"
+      },
       {
         "name": "uncheckable",
         "type": "boolean",

src/buttons/button-radio-group.directive.ts

@@ -0,0 +1,46 @@
+// tslint:disable:no-use-before-declare
+import { ChangeDetectorRef, Directive, ElementRef, forwardRef, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+export const RADIO_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => ButtonRadioGroupDirective),
+  multi: true
+};
+
+/**
+ * A group of radio buttons.
+ * A value of a selected button is bound to a variable specified via ngModel.
+ */
+@Directive({
+  selector: '[btnRadioGroup]',
+  providers: [RADIO_CONTROL_VALUE_ACCESSOR]
+})
+export class ButtonRadioGroupDirective implements ControlValueAccessor {
+  onChange: any = Function.prototype;
+  onTouched: any = Function.prototype;
+
+  get value(): any {
+    return this._value;
+  }
+  set value(value: any) {
+    this._value = value;
+  }
+
+  private _value: any;
+
+  constructor(private el: ElementRef, private cdr: ChangeDetectorRef) {}
+
+  writeValue(value: any): void {
+    this._value = value;
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+}

src/buttons/button-radio.directive.ts

@@ -1,9 +1,10 @@
 // tslint:disable:no-use-before-declare
 import {
-  ChangeDetectorRef, Directive, ElementRef, forwardRef, HostBinding,
-  HostListener, Input, OnInit
+  ChangeDetectorRef, Directive, ElementRef, forwardRef, HostBinding, HostListener, Input, OnInit,
+  Optional, Renderer2
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ButtonRadioGroupDirective } from './button-radio-group.directive';
 
 export const RADIO_CONTROL_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -22,41 +23,56 @@ export const RADIO_CONTROL_VALUE_ACCESSOR: any = {
 export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
   onChange: any = Function.prototype;
   onTouched: any = Function.prototype;
+  private _value: any;
+  private _disabled: boolean;
 
   /** Radio button value, will be set to `ngModel` */
   @Input() btnRadio: any;
   /** If `true` — radio button can be unchecked */
   @Input() uncheckable: boolean;
   /** Current value of radio component or group */
-  @Input() value: any;
+  @Input() get value(): any {
+    return this.group ? this.group.value : this._value;
+  }
+
+  set value(value: any) {
+    if (this.group) {
+      this.group.value = value;
+
+      return;
+    }
+    this._value = value;
+  }
+  /** If `true` — radio button is disabled */
+  @Input() get disabled(): boolean {
+    return this._disabled;
+  }
+
+  set disabled(disabled: boolean) {
+    this._disabled = disabled;
+    this.setDisabledState(disabled);
+  }
 
   @HostBinding('class.active')
   get isActive(): boolean {
     return this.btnRadio === this.value;
   }
 
-  constructor(private el: ElementRef, private cdr: ChangeDetectorRef) {
-  }
+  constructor(
+    private el: ElementRef,
+    private cdr: ChangeDetectorRef,
+    @Optional() private group: ButtonRadioGroupDirective,
+    private renderer: Renderer2
+  ) {}
 
   @HostListener('click')
   onClick(): void {
-    if (this.el.nativeElement.attributes.disabled) {
-      return;
-    }
-
-    if (this.uncheckable && this.btnRadio === this.value) {
-      this.value = undefined;
-      this.onTouched();
-      this.onChange(this.value);
-
+    if (this.el.nativeElement.attributes.disabled || !this.uncheckable && this.btnRadio === this.value) {
       return;
     }
 
-    if (this.btnRadio !== this.value) {
-      this.value = this.btnRadio;
-      this.onTouched();
-      this.onChange(this.value);
-    }
+    this.value = this.uncheckable && this.btnRadio === this.value ? undefined : this.btnRadio;
+    this._onChange(this.value);
   }
 
   ngOnInit(): void {
@@ -67,6 +83,17 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
     this.onTouched();
   }
 
+  _onChange(value: any): void {
+    if (this.group) {
+      this.group.onTouched();
+      this.group.onChange(value);
+
+      return;
+    }
+    this.onTouched();
+    this.onChange(value);
+  }
+
   // ControlValueAccessor
   // model -> view
   writeValue(value: any): void {
@@ -81,4 +108,13 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
   registerOnTouched(fn: any): void {
     this.onTouched = fn;
   }
+
+  setDisabledState(disabled: boolean): void {
+    if (disabled) {
+      this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
+
+      return;
+    }
+    this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
+  }
 }