From eef407004b9792d68bbbb10e77095d62d9922b90 Mon Sep 17 00:00:00 2001 From: anastasiia_glushkova Date: Tue, 17 Dec 2024 13:55:02 +0100 Subject: [PATCH] feat(angular): fix required error for datetime control --- .../catalyst-demo/src/app/app.module.ts | 2 +- .../src/lib/datetime/datetime.component.ts | 21 +++++++++++++++++-- .../src/lib/directives/date-value-accessor.ts | 20 ++++++++++++++---- .../src/lib/directives/time-value-accessor.ts | 19 +++++++++++++---- 4 files changed, 51 insertions(+), 11 deletions(-) diff --git a/angular/projects/catalyst-demo/src/app/app.module.ts b/angular/projects/catalyst-demo/src/app/app.module.ts index 4cb068677..be52a7e0d 100644 --- 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 index 2a39b9bb3..6fddb332a 100644 --- 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,6 +58,8 @@ export class DatetimeComponent implements AfterContentInit, ControlValueAccessor }); } + constructor(private injector: Injector) {} + ngAfterContentInit(): void { if (!this.dateInput) { throw new Error('Missing child element '); @@ -57,6 +67,13 @@ export class DatetimeComponent implements AfterContentInit, ControlValueAccessor if (!this.timeInput) { throw new Error('Missing child element '); } + + // @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 index f52df0451..2f08caae9 100644 --- a/angular/projects/catalyst/src/lib/directives/date-value-accessor.ts +++ b/angular/projects/catalyst/src/lib/directives/date-value-accessor.ts @@ -1,5 +1,5 @@ -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'; @@ -7,7 +7,8 @@ import { ValueAccessor } from './value-accessor'; /* 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 index 156a1807c..1dc70e78f 100644 --- a/angular/projects/catalyst/src/lib/directives/time-value-accessor.ts +++ b/angular/projects/catalyst/src/lib/directives/time-value-accessor.ts @@ -1,5 +1,5 @@ -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'; @@ -7,7 +7,8 @@ import { ValueAccessor } from './value-accessor'; /* 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; + }); + } }