Permalink
Browse files

fix(forms): disable all radios with disable()

  • Loading branch information...
kara authored and IgorMinar committed Sep 20, 2016
1 parent 39e251e commit 2860418a3cb9b16f88e1bc37ff1df036fe9cc141
@@ -334,7 +334,7 @@ export abstract class AbstractControl {
}
this._updateAncestors(onlySelf);
- this._onDisabledChange(true);
+ this._onDisabledChange.forEach((changeFn) => changeFn(true));
}
/**
@@ -350,7 +350,7 @@ export abstract class AbstractControl {
this.updateValueAndValidity({onlySelf: true, emitEvent: emitEvent});
this._updateAncestors(onlySelf);
- this._onDisabledChange(false);
+ this._onDisabledChange.forEach((changeFn) => changeFn(false));
}
private _updateAncestors(onlySelf: boolean) {
@@ -595,7 +595,7 @@ export abstract class AbstractControl {
}
/** @internal */
- _onDisabledChange(isDisabled: boolean): void {}
+ _onDisabledChange: Function[] = [];
/** @internal */
_isBoxedValue(formState: any): boolean {
@@ -770,14 +770,16 @@ export class FormControl extends AbstractControl {
*/
_clearChangeFns(): void {
this._onChange = [];
- this._onDisabledChange = null;
+ this._onDisabledChange = [];
this._onCollectionChange = () => {};
}
/**
* Register a listener for disabled events.
*/
- registerOnDisabledChange(fn: (isDisabled: boolean) => void): void { this._onDisabledChange = fn; }
+ registerOnDisabledChange(fn: (isDisabled: boolean) => void): void {
+ this._onDisabledChange.push(fn);
+ }
/**
* @internal
@@ -1022,6 +1022,54 @@ export function main() {
});
+ it('should disable all radio buttons when disable() is called', () => {
+ const fixture = TestBed.createComponent(FormControlRadioButtons);
+ const form =
+ new FormGroup({food: new FormControl('fish'), drink: new FormControl('cola')});
+ fixture.componentInstance.form = form;
+ fixture.detectChanges();
+
+ const inputs = fixture.debugElement.queryAll(By.css('input'));
+ expect(inputs[0].nativeElement.disabled).toEqual(false);
+ expect(inputs[1].nativeElement.disabled).toEqual(false);
+ expect(inputs[2].nativeElement.disabled).toEqual(false);
+ expect(inputs[3].nativeElement.disabled).toEqual(false);
+
+ form.get('food').disable();
+ expect(inputs[0].nativeElement.disabled).toEqual(true);
+ expect(inputs[1].nativeElement.disabled).toEqual(true);
+ expect(inputs[2].nativeElement.disabled).toEqual(false);
+ expect(inputs[3].nativeElement.disabled).toEqual(false);
+
+ form.disable();
+ expect(inputs[0].nativeElement.disabled).toEqual(true);
+ expect(inputs[1].nativeElement.disabled).toEqual(true);
+ expect(inputs[2].nativeElement.disabled).toEqual(true);
+ expect(inputs[3].nativeElement.disabled).toEqual(true);
+
+ form.enable();
+ expect(inputs[0].nativeElement.disabled).toEqual(false);
+ expect(inputs[1].nativeElement.disabled).toEqual(false);
+ expect(inputs[2].nativeElement.disabled).toEqual(false);
+ expect(inputs[3].nativeElement.disabled).toEqual(false);
+ });
+
+ it('should disable all radio buttons when initially disabled', () => {
+ const fixture = TestBed.createComponent(FormControlRadioButtons);
+ const form = new FormGroup({
+ food: new FormControl({value: 'fish', disabled: true}),
+ drink: new FormControl('cola')
+ });
+ fixture.componentInstance.form = form;
+ fixture.detectChanges();
+
+ const inputs = fixture.debugElement.queryAll(By.css('input'));
+ expect(inputs[0].nativeElement.disabled).toEqual(true);
+ expect(inputs[1].nativeElement.disabled).toEqual(true);
+ expect(inputs[2].nativeElement.disabled).toEqual(false);
+ expect(inputs[3].nativeElement.disabled).toEqual(false);
+ });
+
});
describe('custom value accessors', () => {
@@ -445,6 +445,39 @@ export function main() {
expect(input.nativeElement.disabled).toEqual(false);
}));
+ it('should disable radio controls properly with programmatic call', fakeAsync(() => {
+ const fixture = TestBed.createComponent(NgModelRadioForm);
+ fixture.componentInstance.food = 'fish';
+ fixture.detectChanges();
+ tick();
+
+ const form = fixture.debugElement.children[0].injector.get(NgForm);
+ form.control.get('food').disable();
+ tick();
+
+ const inputs = fixture.debugElement.queryAll(By.css('input'));
+ expect(inputs[0].nativeElement.disabled).toBe(true);
+ expect(inputs[1].nativeElement.disabled).toBe(true);
+ expect(inputs[2].nativeElement.disabled).toBe(false);
+ expect(inputs[3].nativeElement.disabled).toBe(false);
+
+ form.control.disable();
+ tick();
+
+ expect(inputs[0].nativeElement.disabled).toBe(true);
+ expect(inputs[1].nativeElement.disabled).toBe(true);
+ expect(inputs[2].nativeElement.disabled).toBe(true);
+ expect(inputs[3].nativeElement.disabled).toBe(true);
+
+ form.control.enable();
+ tick();
+
+ expect(inputs[0].nativeElement.disabled).toBe(false);
+ expect(inputs[1].nativeElement.disabled).toBe(false);
+ expect(inputs[2].nativeElement.disabled).toBe(false);
+ expect(inputs[3].nativeElement.disabled).toBe(false);
+ }));
+
});
describe('radio controls', () => {
@@ -928,7 +961,7 @@ class NgModelOptionsStandalone {
<form>
<input type="radio" name="food" [(ngModel)]="food" value="chicken">
<input type="radio" name="food" [(ngModel)]="food" value="fish">
-
+
<input type="radio" name="drink" [(ngModel)]="drink" value="cola">
<input type="radio" name="drink" [(ngModel)]="drink" value="sprite">
</form>

0 comments on commit 2860418

Please sign in to comment.