feat(angular): fix required error for datetime control

haiilo · Dec 17, 2024 · eef4070 · eef4070
1 parent 0fe4db4
commit eef4070
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/angular/projects/catalyst-demo/src/app/app.module.ts b/angular/projects/catalyst-demo/src/app/app.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { CatalystModule } from '@haiilo/catalyst-angular';
+import { CatalystModule } from '../../../catalyst/src';
 import { FormlyModule } from '@ngx-formly/core';
 import { CatalystFormlyModule } from '../../../catalyst-formly/src';
 import { AppComponent } from './app.component';

diff --git a/angular/projects/catalyst/src/lib/datetime/datetime.component.ts b/angular/projects/catalyst/src/lib/datetime/datetime.component.ts
@@ -1,5 +1,13 @@
-import { AfterContentInit, Component, ContentChild, Input, ViewEncapsulation } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  InjectFlags,
+  Injector,
+  Input,
+  ViewEncapsulation
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
 import { DateValueAccessor } from '../directives/date-value-accessor';
 import { TimeValueAccessor } from '../directives/time-value-accessor';
 
@@ -50,13 +58,22 @@ export class DatetimeComponent implements AfterContentInit, ControlValueAccessor
     });
   }
 
+  constructor(private injector: Injector) {}
+
   ngAfterContentInit(): void {
     if (!this.dateInput) {
       throw new Error('Missing child element <cat-date></cat-date>');
     }
     if (!this.timeInput) {
       throw new Error('Missing child element <cat-time></cat-time>');
     }
+
+    // @ts-ignore
+    const control = this.injector.get(NgControl, undefined, InjectFlags.Optional);
+    if (control?.control?.hasValidator(Validators.required)) {
+      this.dateInput.nativeElement.required = true;
+      this.timeInput.nativeElement.required = true;
+    }
   }
 
   writeValue(value: any): void {

diff --git a/angular/projects/catalyst/src/lib/directives/date-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/date-value-accessor.ts
@@ -1,13 +1,14 @@
-import { Directive, ElementRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef, Optional, SkipSelf } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
   selector: 'cat-date, cat-date-inline',
   host: {
-    '(catChange)': 'handleChangeEvent($event.target.value)'
+    '(catChange)': 'handleChangeEvent($event.target.value); updateErrors()',
+    '(catBlur)': 'updateErrors()'
   },
   providers: [
     {
@@ -18,7 +19,10 @@ import { ValueAccessor } from './value-accessor';
   ]
 })
 export class DateValueAccessor extends ValueAccessor {
-  constructor(el: ElementRef) {
+  constructor(
+    el: ElementRef,
+    @Optional() @SkipSelf() private readonly ngControl?: NgControl
+  ) {
     super(el);
   }
   get nativeElement() {
@@ -43,6 +47,14 @@ export class DateValueAccessor extends ValueAccessor {
     }
     super.handleChangeEvent(null);
   }
+
+  updateErrors() {
+    setTimeout(() => {
+      this.el.nativeElement.errors =
+        this.ngControl?.control?.errors?.required && !this.el.nativeElement.value ? { required: true } : null;
+    });
+  }
+
   private toISO(value: any) {
     if (value instanceof Date) {
       const year = value.getFullYear();

diff --git a/angular/projects/catalyst/src/lib/directives/time-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/time-value-accessor.ts
@@ -1,13 +1,14 @@
-import { Directive, ElementRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef, Optional, SkipSelf } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
   selector: 'cat-time',
   host: {
-    '(catChange)': 'handleChangeEvent($event.target.value)'
+    '(catChange)': 'handleChangeEvent($event.target.value); updateErrors()',
+    '(catBlur)': 'updateErrors()'
   },
   providers: [
     {
@@ -18,7 +19,10 @@ import { ValueAccessor } from './value-accessor';
   ]
 })
 export class TimeValueAccessor extends ValueAccessor {
-  constructor(el: ElementRef) {
+  constructor(
+    el: ElementRef,
+    @Optional() @SkipSelf() private readonly ngControl?: NgControl
+  ) {
     super(el);
   }
   get nativeElement() {
@@ -41,4 +45,11 @@ export class TimeValueAccessor extends ValueAccessor {
     }
     return super.handleChangeEvent(null);
   }
+
+  updateErrors() {
+    setTimeout(() => {
+      this.el.nativeElement.errors =
+        this.ngControl?.control?.errors?.required && !this.el.nativeElement.value ? { required: true } : null;
+    });
+  }
 }