fix(buttons): disabled state of group interactions

Closes #1143 Closes #1148
ng-bootstrap · Dec 20, 2016 · e24f4c6 · e24f4c6
1 parent 4c0d9d0
commit e24f4c6
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 7 deletions.
diff --git a/src/buttons/radio.spec.ts b/src/buttons/radio.spec.ts
@@ -398,6 +398,62 @@ describe('ngbRadioGroup', () => {
            });
      }));
 
+  it('disable all radio buttons when group is disabled regardless of button disabled state', async(() => {
+       const html = `
+      <form>
+        <div ngbRadioGroup [(ngModel)]="model" name="control" [disabled]="groupDisabled">
+          <label class="btn">
+            <input type="radio" value="foo" [disabled]="disabled"/>
+          </label>          
+        </div>
+      </form>`;
+
+       const fixture = createTestComponent(html);
+
+       fixture.whenStable()
+           .then(() => {
+             expect(getLabel(fixture.nativeElement, 0)).toHaveCssClass('disabled');
+             expect(getInput(fixture.nativeElement, 0).hasAttribute('disabled')).toBeTruthy();
+
+             fixture.componentInstance.disabled = false;
+             fixture.detectChanges();
+             return fixture.whenStable();
+           })
+           .then(() => {
+             fixture.detectChanges();
+             expect(getLabel(fixture.nativeElement, 0)).toHaveCssClass('disabled');
+             expect(getInput(fixture.nativeElement, 0).hasAttribute('disabled')).toBeTruthy();
+           });
+     }));
+
+  it('button stays disabled when group is enabled', async(() => {
+       const html = `
+      <form>
+        <div ngbRadioGroup [(ngModel)]="model" name="control" [disabled]="groupDisabled">
+          <label class="btn">
+            <input type="radio" value="foo" [disabled]="disabled"/>
+          </label>          
+        </div>
+      </form>`;
+
+       const fixture = createTestComponent(html);
+
+       fixture.whenStable()
+           .then(() => {
+             expect(getLabel(fixture.nativeElement, 0)).toHaveCssClass('disabled');
+             expect(getInput(fixture.nativeElement, 0).hasAttribute('disabled')).toBeTruthy();
+
+             fixture.componentInstance.groupDisabled = false;
+             fixture.detectChanges();
+             return fixture.whenStable();
+           })
+           .then(() => {
+             fixture.detectChanges();
+             expect(getLabel(fixture.nativeElement, 0)).toHaveCssClass('disabled');
+             expect(getInput(fixture.nativeElement, 0).hasAttribute('disabled')).toBeTruthy();
+           });
+     }));
+
   it('should select a radio button when checked attribute is used', () => {
     const html1 = `
       <input type="radio" name="State" value="0" /> Foo <br>
@@ -533,5 +589,6 @@ class TestComponent {
   values: any = ['one', 'two', 'three'];
   shown = true;
   disabled = true;
+  groupDisabled = true;
   checked: any;
 }
diff --git a/src/buttons/radio.ts b/src/buttons/radio.ts
@@ -19,6 +19,9 @@ const NGB_RADIO_VALUE_ACCESSOR = {
 export class NgbRadioGroup implements ControlValueAccessor {
   private _radios: Set<NgbRadio> = new Set<NgbRadio>();
   private _value = null;
+  private _disabled: boolean;
+
+  get disabled() { return this._disabled; }
 
   onChange = (_: any) => {};
   onTouched = () => {};
@@ -36,7 +39,10 @@ export class NgbRadioGroup implements ControlValueAccessor {
 
   registerOnTouched(fn: () => any): void { this.onTouched = fn; }
 
-  setDisabledState(isDisabled: boolean): void { this._updateRadiosDisabled(isDisabled); }
+  setDisabledState(isDisabled: boolean): void {
+    this._disabled = isDisabled;
+    this._updateRadiosDisabled();
+  }
 
   unregister(radio: NgbRadio) { this._radios.delete(radio); }
 
@@ -46,7 +52,7 @@ export class NgbRadioGroup implements ControlValueAccessor {
   }
 
   private _updateRadiosValue() { this._radios.forEach((radio) => radio.updateValue(this._value)); }
-  private _updateRadiosDisabled(isDisabled) { this._radios.forEach((radio) => radio.updateDisabled(isDisabled)); }
+  private _updateRadiosDisabled() { this._radios.forEach((radio) => radio.updateDisabled()); }
 }
 
 
@@ -101,7 +107,8 @@ export class NgbRadio implements OnDestroy {
 
   @Input('disabled')
   set disabled(isDisabled: any) {
-    this.updateDisabled(isDisabled !== false);
+    this._disabled = isDisabled !== false;
+    this.updateDisabled();
   }
 
   set focused(isFocused: boolean) {
@@ -114,7 +121,7 @@ export class NgbRadio implements OnDestroy {
 
   get checked() { return this._checked; }
 
-  get disabled() { return this._disabled; }
+  get disabled() { return (this._group && this._group.disabled) || this._disabled; }
 
   constructor(
       @Optional() private _group: NgbRadioGroup, @Optional() private _label: NgbActiveLabel,
@@ -141,10 +148,10 @@ export class NgbRadio implements OnDestroy {
     this._label.active = this._checked;
   }
 
-  updateDisabled(isDisabled) {
-    this._disabled = isDisabled;
+  updateDisabled() {
+    let disabled = (this._group && this._group.disabled) || this._disabled;
     if (this._label) {
-      this._label.disabled = this._disabled;
+      this._label.disabled = disabled;
     }
   }
 }