Skip to content

Commit 72ca1ae

Browse files
wnvkownvko
authored
fix(date-picker, time-picker): add visual validity state and required asterisk #6471, #6846 (#6722)
1 parent 119c1b5 commit 72ca1ae

File tree

7 files changed

+644
-224
lines changed

7 files changed

+644
-224
lines changed

‎projects/igniteui-angular/src/lib/calendar/calendar-base.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -616,7 +616,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
616616
* Deselects date(s) (based on the selection type).
617617
*/
618618
public deselectDate(value?: Date | Date[]) {
619-
if (this.selectedDates === null || this.selectedDates.length === 0) {
619+
if (!this.selectedDates || this.selectedDates.length === 0) {
620620
return;
621621
}
622622

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,42 @@
11
<ng-template #readOnlyDatePickerTemplate>
2-
<igx-input-group (click)="openDialog()">
2+
<igx-input-group (click)="openDialog()" (mousedown)="mouseDown($event)">
33
<igx-prefix>
44
<igx-icon>today</igx-icon>
55
</igx-prefix>
66
<label *ngIf="labelVisibility" igxLabel>{{label}}</label>
7-
<input #readonlyInput class="igx-date-picker__input-date" igxInput [value]="displayData || ''"
8-
[disabled]="disabled" readonly />
7+
<input
8+
class="igx-date-picker__input-date"
9+
igxInput
10+
[value]="displayData || ''"
11+
[disabled]="disabled"
12+
(blur)="onBlur($event)"
13+
readonly
14+
/>
915
</igx-input-group>
1016
</ng-template>
1117

1218
<ng-template #editableDatePickerTemplate>
13-
<igx-input-group #editableInputGroup [supressInputAutofocus]="true">
19+
<igx-input-group #editableInputGroup [supressInputAutofocus]="true" (mousedown)="mouseDown($event)">
1420
<igx-prefix (click)="openDialog(editableInputGroup.element.nativeElement)">
1521
<igx-icon>today</igx-icon>
1622
</igx-prefix>
1723
<label *ngIf="labelVisibility" igxLabel>{{label}}</label>
18-
<input #editableInput class="igx-date-picker__input-date" igxInput [igxTextSelection]="true"
19-
type="text" [value]="transformedDate"
20-
[igxMask]="inputMask" [placeholder]="mask" [disabled]="disabled" [displayValuePipe]="displayValuePipe"
21-
[focusedValuePipe]="inputValuePipe" (blur)="onBlur($event)" (wheel)="onWheel($event)"
22-
(input)="onInput($event)" (focus)="onFocus()" />
24+
<input
25+
class="igx-date-picker__input-date"
26+
igxInput
27+
[igxTextSelection]="true"
28+
type="text"
29+
[value]="transformedDate"
30+
[igxMask]="inputMask"
31+
[placeholder]="mask"
32+
[disabled]="disabled"
33+
[displayValuePipe]="displayValuePipe"
34+
[focusedValuePipe]="inputValuePipe"
35+
(blur)="onBlur($event)"
36+
(wheel)="onWheel($event)"
37+
(input)="onInput($event)"
38+
(focus)="onFocus()"
39+
/>
2340
<igx-suffix *ngIf="!isEmpty" (click)="clear()">
2441
<igx-icon>clear</igx-icon>
2542
</igx-suffix>

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

Lines changed: 129 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import { Component, ViewChild, ElementRef } from '@angular/core';
1+
import { Component, ViewChild, ElementRef, EventEmitter } from '@angular/core';
22
import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
3-
import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
3+
import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
44
import { By } from '@angular/platform-browser';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
66
import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
77
import { IgxLabelDirective } from '../directives/label/label.directive';
8-
import { IgxInputDirective } from '../directives/input/input.directive';
8+
import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive';
99
import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
10-
import { IgxInputGroupModule } from '../input-group';
10+
import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group';
1111
import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
1212
import { configureTestSuite } from '../test-utils/configure-suite';
13-
import { DateRangeType } from 'igniteui-angular';
1413
import { IgxButtonModule } from '../directives/button/button.directive';
1514
import { IgxCalendarModule } from '../calendar';
1615
import { InteractionMode } from '../core/enums';
16+
import { DateRangeType } from '../core/dates/dateRange';
17+
import { OverlayCancelableEventArgs, OverlayEventArgs, OverlayClosingEventArgs, HorizontalAlignment, VerticalAlignment } from '../services';
1718

1819
describe('IgxDatePicker', () => {
1920
configureTestSuite();
@@ -1262,38 +1263,133 @@ describe('IgxDatePicker', () => {
12621263

12631264
describe('Reactive form', () => {
12641265
let fixture: ComponentFixture<IgxDatePickerReactiveFormComponent>;
1265-
let datePicker: IgxDatePickerComponent;
1266+
let datePickerOnChangeComponent: IgxDatePickerComponent;
1267+
let datePickerOnBlurComponent: IgxDatePickerComponent;
12661268

12671269
beforeEach(() => {
12681270
fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent);
1269-
datePicker = fixture.componentInstance.datePicker;
1271+
datePickerOnChangeComponent = fixture.componentInstance.datePickerOnChangeComponent;
1272+
datePickerOnBlurComponent = fixture.componentInstance.datePickerOnBlurComponent;
12701273
fixture.detectChanges();
12711274
});
12721275

1273-
// Bug #6025 Date picker does not disable in reactive form
1274-
it('Should disable when form is disabled', fakeAsync(() => {
1276+
it('Should set date picker status to invalid when it is required and has no value', fakeAsync(() => {
1277+
const inputGroupsElements = fixture.debugElement.queryAll(By.directive(IgxInputDirective));
1278+
const inputGroupElement = inputGroupsElements.find(d => d.componentInstance === datePickerOnChangeComponent);
1279+
const inputDirective = inputGroupElement.injector.get(IgxInputDirective) as IgxInputDirective;
1280+
1281+
expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
1282+
1283+
datePickerOnChangeComponent.value = null;
12751284
fixture.detectChanges();
1276-
const formGroup: FormGroup = fixture.componentInstance.reactiveForm;
1277-
const inputGroup = fixture.debugElement.query(By.css('.igx-input-group'));
12781285

1279-
inputGroup.nativeElement.click();
1280-
tick();
1286+
expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
1287+
}));
1288+
1289+
it('Should set date picker status to invalid when it is required and has no value onBlur', fakeAsync(() => {
1290+
datePickerOnBlurComponent.mode = InteractionMode.DropDown;
1291+
datePickerOnBlurComponent.mask = 'dd/mm/yyyy';
1292+
datePickerOnBlurComponent.inputMask = 'dd/mm/yyyy';
12811293
fixture.detectChanges();
1282-
expect(datePicker.collapsed).toBeFalsy();
12831294

1284-
datePicker.closeCalendar();
1295+
const inputDirectiveElements = fixture.debugElement.queryAll(By.directive(IgxInputDirective));
1296+
const inputDirectiveElement = inputDirectiveElements.find(d => d.componentInstance === datePickerOnBlurComponent);
1297+
const inputDirective = inputDirectiveElement.injector.get(IgxInputDirective) as IgxInputDirective;
1298+
1299+
expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
1300+
1301+
inputDirectiveElement.triggerEventHandler('focus', {});
12851302
fixture.detectChanges();
12861303

1287-
formGroup.disable();
1288-
tick();
1304+
expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
1305+
1306+
datePickerOnBlurComponent.value = null;
12891307
fixture.detectChanges();
1308+
expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
12901309

1291-
inputGroup.nativeElement.click();
1292-
tick();
1310+
inputDirectiveElement.triggerEventHandler('blur', { target: { value: ''}});
12931311
fixture.detectChanges();
1294-
const dateDropDown = document.getElementsByClassName('igx-date-picker--dropdown');
1295-
expect(dateDropDown.length).toEqual(0);
1312+
1313+
expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
12961314
}));
1315+
1316+
// Bug #6025 Date picker does not disable in reactive form
1317+
it('Should disable when form is disabled', () => {
1318+
const formGroup: FormGroup = fixture.componentInstance.reactiveForm;
1319+
const inputGroupsElements = fixture.debugElement.queryAll(By.directive(IgxInputDirective));
1320+
const inputGroupElement = inputGroupsElements.find(d => d.componentInstance === datePickerOnBlurComponent);
1321+
const inputDirective = inputGroupElement.injector.get(IgxInputDirective) as IgxInputDirective;
1322+
expect(inputDirective.disabled).toBeFalsy();
1323+
1324+
formGroup.disable();
1325+
fixture.detectChanges();
1326+
expect(inputDirective.disabled).toBeTruthy();
1327+
});
1328+
});
1329+
1330+
describe('Control value accessor unit tests', () => {
1331+
let ngModel;
1332+
let overlay;
1333+
let element;
1334+
let cdr;
1335+
let moduleRef;
1336+
let injector;
1337+
let inputGroup: IgxInputGroupComponent;
1338+
1339+
beforeEach(() => {
1340+
ngModel = {
1341+
control: { touched: false, dirty: false, validator: null },
1342+
valid: false,
1343+
statusChanges: new EventEmitter(),
1344+
};
1345+
overlay = {
1346+
onOpening: new EventEmitter<OverlayCancelableEventArgs>(),
1347+
onOpened: new EventEmitter<OverlayEventArgs>(),
1348+
onClosed: new EventEmitter<OverlayEventArgs>(),
1349+
onClosing: new EventEmitter<OverlayClosingEventArgs>()
1350+
};
1351+
element = {};
1352+
cdr = {
1353+
markForCheck: () => {},
1354+
detectChanges: () => {},
1355+
detach: () => {},
1356+
reattach: () => {}
1357+
};
1358+
moduleRef = {};
1359+
injector = { get: () => ngModel };
1360+
inputGroup = new IgxInputGroupComponent(null, null);
1361+
});
1362+
1363+
it('should initialize date picker with required correctly', () => {
1364+
const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
1365+
datePicker['inputGroup'] = inputGroup;
1366+
ngModel.control.validator = () => ({ required: true});
1367+
datePicker.ngOnInit();
1368+
datePicker.ngAfterViewInit();
1369+
datePicker.ngAfterViewChecked();
1370+
1371+
expect(datePicker).toBeDefined();
1372+
expect(inputGroup.isRequired).toBeTruthy();
1373+
});
1374+
1375+
it('should update inputGroup isRequired correctly', () => {
1376+
const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
1377+
datePicker['inputGroup'] = inputGroup;
1378+
datePicker.ngOnInit();
1379+
datePicker.ngAfterViewInit();
1380+
datePicker.ngAfterViewChecked();
1381+
1382+
expect(datePicker).toBeDefined();
1383+
expect(inputGroup.isRequired).toBeFalsy();
1384+
1385+
ngModel.control.validator = () => ({ required: true});
1386+
ngModel.statusChanges.emit();
1387+
expect(inputGroup.isRequired).toBeTruthy();
1388+
1389+
ngModel.control.validator = () => ({ required: false});
1390+
ngModel.statusChanges.emit();
1391+
expect(inputGroup.isRequired).toBeFalsy();
1392+
});
12971393
});
12981394
});
12991395

@@ -1444,23 +1540,27 @@ export class IgxDatePickerOpeningComponent {
14441540
@Component({
14451541
template: `
14461542
<form [formGroup]="reactiveForm">
1447-
<p>
1448-
<igx-date-picker formControlName="datePickerReactive" #datePickerReactive></igx-date-picker>
1449-
</p>
1450-
</form>
1543+
<igx-date-picker formControlName="datePickerOnChange" #datePickerOnChangeComponent></igx-date-picker>
1544+
<igx-date-picker formControlName="datePickerOnBlur" #datePickerOnBlurComponent></igx-date-picker>
1545+
</form>
14511546
`
14521547
})
14531548
class IgxDatePickerReactiveFormComponent {
1454-
@ViewChild('datePickerReactive', { read: IgxDatePickerComponent, static: true })
1455-
public datePicker: IgxDatePickerComponent;
1549+
@ViewChild('datePickerOnChangeComponent', { read: IgxDatePickerComponent, static: true })
1550+
public datePickerOnChangeComponent: IgxDatePickerComponent;
1551+
1552+
@ViewChild('datePickerOnBlurComponent', { read: IgxDatePickerComponent, static: true })
1553+
public datePickerOnBlurComponent: IgxDatePickerComponent;
1554+
14561555
reactiveForm: FormGroup;
14571556

14581557
constructor(fb: FormBuilder) {
1558+
const date = new Date(2000, 10, 15);
14591559
this.reactiveForm = fb.group({
1460-
datePickerReactive: new FormControl(''),
1560+
datePickerOnChange: [date, Validators.required],
1561+
datePickerOnBlur: [date, { updateOn: 'blur', validators: Validators.required}]
14611562
});
14621563
}
1463-
onSubmitReactive() { }
14641564
}
14651565

14661566
@Component({

0 commit comments

Comments
 (0)