fix(module:date-picker): ng-untouched when loose focus (#7922)

NG-ZORRO · May 9, 2023 · 9ebcf72 · 9ebcf72
1 parent 59143d2
commit 9ebcf72
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -330,6 +330,21 @@ describe('NzDatePickerComponent', () => {
       expect(getPickerContainer()).toBeNull();
     }));
 
+    it('should mark the control touched when user loseFocus of datePicker', fakeAsync(() => {
+      fixtureInstance.useSuite = 4;
+      fixtureInstance.control = new FormControl<Date | null>(null);
+      fixture.detectChanges();
+      flush();
+      const datePickerElement = fixture.debugElement.query(By.directive(NzDatePickerComponent)).nativeElement;
+      openPickerByClickTrigger();
+      expect(datePickerElement.classList).toContain('ng-untouched');
+      triggerInputBlur();
+      fixture.detectChanges();
+      flush();
+      expect(datePickerElement.classList).toContain('ng-touched');
+      expect(fixtureInstance.control.touched).toBeTruthy();
+    }));
+
     it('should support nzInputReadOnly', fakeAsync(() => {
       fixtureInstance.nzInputReadOnly = true;
       fixture.detectChanges();

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -435,6 +435,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit,
   // blur event has not the relatedTarget in IE11, use focusout instead.
   onFocusout(event: FocusEvent): void {
     event.preventDefault();
+    this.onTouchedFn();
     if (!this.elementRef.nativeElement.contains(<Node>event.relatedTarget)) {
       this.checkAndClose();
     }