feat(timepicker): propagate second as 0 if seconds not displayed

also make sure the spinner doesn't stay invalid when hiding invalid seconds Closes #711
ng-bootstrap · Sep 12, 2016 · c1c68b0 · c1c68b0
1 parent a729ba9
commit c1c68b0
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 7 deletions.
diff --git a/demo/src/app/components/timepicker/demos/seconds/timepicker-seconds.ts b/demo/src/app/components/timepicker/demos/seconds/timepicker-seconds.ts
@@ -9,6 +9,6 @@ export class NgbdTimepickerSeconds {
   seconds = true;
 
   toggleSeconds() {
-      this.seconds = !this.seconds;
+    this.seconds = !this.seconds;
   }
 }
diff --git a/src/timepicker/timepicker.spec.ts b/src/timepicker/timepicker.spec.ts
@@ -861,6 +861,95 @@ describe('ngb-timepicker', () => {
       expectSameValues(timepicker, config);
     });
   });
+
+  describe('Seconds handling', () => {
+    it('should propagate seconds to 0 in model if seconds not shown and no second in initial model', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="false"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 10, minute: 30};
+         fixture.detectChanges();
+         fixture.whenStable()
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               const inputs = fixture.debugElement.queryAll(By.css('input'));
+
+               inputs[1].triggerEventHandler('change', createChangeEvent('40'));
+               fixture.detectChanges();
+               expectToDisplayTime(fixture.nativeElement, '10:40');
+               expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 40, second: 0});
+             });
+       }));
+
+    it('should propagate second as 0 in model if seconds not shown and null initial model', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="false"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.detectChanges();
+         fixture.whenStable()
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               const inputs = fixture.debugElement.queryAll(By.css('input'));
+
+               inputs[0].triggerEventHandler('change', createChangeEvent('10'));
+               inputs[1].triggerEventHandler('change', createChangeEvent('40'));
+               fixture.detectChanges();
+               expectToDisplayTime(fixture.nativeElement, '10:40');
+               expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 40, second: 0});
+             });
+       }));
+
+    it('should leave second as is in model if seconds not shown and second present in initial model', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="false"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 10, minute: 30, second: 30};
+         fixture.detectChanges();
+         fixture.whenStable()
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               const inputs = fixture.debugElement.queryAll(By.css('input'));
+
+               inputs[1].triggerEventHandler('change', createChangeEvent('40'));
+               fixture.detectChanges();
+               expectToDisplayTime(fixture.nativeElement, '10:40');
+               expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 40, second: 30});
+             });
+       }));
+
+    it('should reset the second to 0 if invalid when seconds are hidden', async(() => {
+         const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="showSeconds"></ngb-timepicker>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 10, minute: 30, second: null};
+         fixture.detectChanges();
+         fixture.whenStable()
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               expectToDisplayTime(fixture.nativeElement, '10:30:');
+
+               fixture.componentInstance.showSeconds = false;
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               expectToDisplayTime(fixture.nativeElement, '10:30');
+               expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});
+             });
+       }));
+  });
 });
 
 
@@ -873,5 +962,7 @@ class TestComponent {
   disabledForm = new FormGroup({control: new FormControl({value: '', disabled: true})});
   submitted = false;
 
+  showSeconds = true;
+
   onSubmit() { this.submitted = true; }
 }
diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
@@ -1,7 +1,7 @@
-import {Component, Input, forwardRef} from '@angular/core';
+import {Component, Input, forwardRef, OnChanges, SimpleChanges} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 
-import {isNumber, padNumber, toInteger} from '../util/util';
+import {isNumber, padNumber, toInteger, isDefined} from '../util/util';
 import {NgbTime} from './ngb-time';
 import {NgbTimepickerConfig} from './timepicker-config';
 
@@ -134,7 +134,8 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
   `,
   providers: [NGB_TIMEPICKER_VALUE_ACCESSOR]
 })
-export class NgbTimepicker implements ControlValueAccessor {
+export class NgbTimepicker implements ControlValueAccessor,
+    OnChanges {
   disabled: boolean;
   model: NgbTime;
 
@@ -187,7 +188,12 @@ export class NgbTimepicker implements ControlValueAccessor {
   onChange = (_: any) => {};
   onTouched = () => {};
 
-  writeValue(value) { this.model = value ? new NgbTime(value.hour, value.minute, value.second) : new NgbTime(); }
+  writeValue(value) {
+    this.model = value ? new NgbTime(value.hour, value.minute, value.second) : new NgbTime();
+    if (!this.seconds && (!value || !isNumber(value.second))) {
+      this.model.second = 0;
+    }
+  }
 
   registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }
 
@@ -262,8 +268,18 @@ export class NgbTimepicker implements ControlValueAccessor {
    */
   formatMinSec(value: number) { return padNumber(value); }
 
-  private propagateModelChange() {
-    this.onTouched();
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['seconds'] && !this.seconds && this.model && !isNumber(this.model.second)) {
+      this.model.second = 0;
+      this.propagateModelChange(false);
+    }
+  }
+
+  private propagateModelChange(touched = true) {
+    if (touched) {
+      this.onTouched();
+    }
     if (this.model.isValid(this.seconds)) {
       this.onChange({hour: this.model.hour, minute: this.model.minute, second: this.model.second});
     } else {