Set displayValue to mask if no value is present

projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

@@ -183,10 +183,32 @@ describe('IgxTimePicker', () => {
         expect(timePicker.onValidationFailed.emit).toHaveBeenCalled();
     }));
 
-    it('TimePicker cancel button', fakeAsync(() => {
+    it('Should display mask on cancel button click with bound null value', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
+        fixture.componentInstance.dateValue = null;
+        fixture.componentInstance.mode = 'dropdown';
+        fixture.detectChanges();
+        const timePicker = fixture.componentInstance.timePicker;
+        const dom = fixture.debugElement;
+        const timePickerTarget = dom.query(By.directive(IgxInputDirective));
+        spyOn(timePicker.onValidationFailed, 'emit');
+
+        UIInteractions.clickElement(timePickerTarget);
+        tick();
         fixture.detectChanges();
 
+        const cancelButton = dom.query(By.css('.igx-button--flat'));
+        UIInteractions.clickElement(cancelButton);
+        tick();
+        fixture.detectChanges();
+
+        expect(timePicker.onValidationFailed.emit).not.toHaveBeenCalled();
+        expect(timePicker.displayValue).toEqual('--:--:-- --');
+    }));
+
+    it('TimePicker cancel button', fakeAsync(() => {
+        const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
+        fixture.detectChanges();
         const timePicker = fixture.componentInstance.timePicker;
         const dom = fixture.debugElement;
         const initialTime = dom.query(By.directive(IgxInputDirective)).nativeElement.value;
@@ -2024,12 +2046,13 @@ export class IgxTimePickerWithPassedTimeComponent {
 
 @Component({
     template: `
-        <igx-time-picker [value]="dateValue" [format]="customFormat"></igx-time-picker>
+        <igx-time-picker [mode]="mode" [value]="dateValue" [format]="customFormat"></igx-time-picker>
     `
 })
 export class IgxTimePickerWithPmTimeComponent {
     public dateValue: Date = new Date(2017, 7, 7, 12, 27, 23);
     public customFormat = 'h:mm:ss tt';
+    public mode = 'dialog';
     @ViewChild(IgxTimePickerComponent, { static: true }) public timePicker: IgxTimePickerComponent;
 }
 

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -1477,6 +1477,10 @@ export class IgxTimePickerComponent implements
         const oldValue = this.value;
         const newVal = this._convertMinMaxValue(this.displayValue);
 
+        if (this.displayValue === this.parseMask(false)) {
+            return;
+        }
+
         if (this._isValueValid(newVal)) {
             if (!this.value || oldValue.getTime() !== newVal.getTime()) {
                 this.value = newVal;
@@ -1793,7 +1797,7 @@ export class IgxTimePickerComponent implements
      */
     public cancelButtonClick(): void {
         if (this.mode === InteractionMode.DropDown) {
-            this.displayValue = this._formatTime(this.value, this.format);
+            this.displayValue = this.value ? this._formatTime(this.value, this.format) : this.parseMask(false);
         }
 
         this.close();

src/app/time-picker/time-picker.sample.html

@@ -7,7 +7,7 @@
             <h4 class="sample-title">Time Picker with Dropdown</h4>
             <div class="sample-description">{{showDate(date)}}</div>
             <div class="preview" style="width: 280px">
-                <igx-time-picker #tp (onValueChanged)="valueChanged($event)"
+                <igx-time-picker #tp (onValueChanged)="valueChanged($event)" [minValue]="'9:15 AM'" [maxValue]="'9:15 PM'"
                     (onValidationFailed)="validationFailed($event)" [mode]="mode" [isSpinLoop]="isSpinLoop"
                     [(ngModel)]="date" [itemsDelta]="itemsDelta" [format]="format">
                 </igx-time-picker>

src/app/time-picker/time-picker.sample.ts

@@ -17,7 +17,7 @@ export class TimePickerSampleComponent implements AfterViewInit {
     mode = InteractionMode.DropDown;
 
     date1 = new Date(2018, 10, 27, 17, 45, 0, 0);
-    date = new Date(2018, 10, 27, 17, 45, 0, 0);
+    date = new Date(2018, 10, 27, 21, 45, 0, 0);
     val = new Date(0, 0, 0, 19, 35, 30, 0);
     today = new Date(Date.now());