fix(forms): fix resetting radios (#11546)

Closes #11516
This commit is contained in:
Kara 2016-09-12 15:15:58 -07:00 committed by Evan Martin
parent 79055f727b
commit 61aad7925f
3 changed files with 103 additions and 4 deletions

View File

@ -110,9 +110,7 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
writeValue(value: any): void {
this._state = value === this.value;
if (isPresent(value)) {
this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', this._state);
}
this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', this._state);
}
registerOnChange(fn: (_: any) => {}): void {

View File

@ -853,7 +853,7 @@ export function main() {
describe('should support <type=radio>', () => {
it('should support <type=radio>', () => {
it('should support basic functionality', () => {
const fixture = TestBed.createComponent(FormControlRadioButtons);
const form =
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
@ -880,6 +880,53 @@ export function main() {
expect(inputs[1].nativeElement.checked).toEqual(true);
});
it('should support an initial undefined value', () => {
const fixture = TestBed.createComponent(FormControlRadioButtons);
const form = new FormGroup({'food': new FormControl(), 'drink': new FormControl()});
fixture.componentInstance.form = form;
fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input'));
expect(inputs[0].nativeElement.checked).toEqual(false);
expect(inputs[1].nativeElement.checked).toEqual(false);
});
it('should reset properly', () => {
const fixture = TestBed.createComponent(FormControlRadioButtons);
const form =
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
fixture.componentInstance.form = form;
fixture.detectChanges();
form.reset();
fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input'));
expect(inputs[0].nativeElement.checked).toEqual(false);
expect(inputs[1].nativeElement.checked).toEqual(false);
});
it('should set value to null and undefined properly', () => {
const fixture = TestBed.createComponent(FormControlRadioButtons);
const form = new FormGroup(
{'food': new FormControl('chicken'), 'drink': new FormControl('sprite')});
fixture.componentInstance.form = form;
fixture.detectChanges();
form.get('food').setValue(null);
fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input'));
expect(inputs[0].nativeElement.checked).toEqual(false);
form.get('food').setValue('chicken');
fixture.detectChanges();
form.get('food').setValue(undefined);
fixture.detectChanges();
expect(inputs[0].nativeElement.checked).toEqual(false);
});
it('should use formControlName to group radio buttons when name is absent', () => {
const fixture = TestBed.createComponent(FormControlRadioButtons);
const foodCtrl = new FormControl('fish');

View File

@ -464,6 +464,60 @@ export function main() {
expect(inputs[2].nativeElement.checked).toEqual(false);
expect(inputs[3].nativeElement.checked).toEqual(true);
}));
it('should support initial undefined value', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelRadioForm);
fixture.detectChanges();
tick();
const inputs = fixture.debugElement.queryAll(By.css('input'));
expect(inputs[0].nativeElement.checked).toEqual(false);
expect(inputs[1].nativeElement.checked).toEqual(false);
expect(inputs[2].nativeElement.checked).toEqual(false);
expect(inputs[3].nativeElement.checked).toEqual(false);
}));
it('should support resetting properly', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelRadioForm);
fixture.componentInstance.food = 'chicken';
fixture.detectChanges();
tick();
const form = fixture.debugElement.query(By.css('form'));
dispatchEvent(form.nativeElement, 'reset');
fixture.detectChanges();
tick();
const inputs = fixture.debugElement.queryAll(By.css('input'));
expect(inputs[0].nativeElement.checked).toEqual(false);
expect(inputs[1].nativeElement.checked).toEqual(false);
}));
it('should support setting value to null and undefined', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelRadioForm);
fixture.componentInstance.food = 'chicken';
fixture.detectChanges();
tick();
fixture.componentInstance.food = null;
fixture.detectChanges();
tick();
const inputs = fixture.debugElement.queryAll(By.css('input'));
expect(inputs[0].nativeElement.checked).toEqual(false);
expect(inputs[1].nativeElement.checked).toEqual(false);
fixture.componentInstance.food = 'chicken';
fixture.detectChanges();
tick();
fixture.componentInstance.food = undefined;
fixture.detectChanges();
tick();
expect(inputs[0].nativeElement.checked).toEqual(false);
expect(inputs[1].nativeElement.checked).toEqual(false);
}));
});
describe('select controls', () => {