diff --git a/projects/angular/src/forms/common/wrapped-control.ts b/projects/angular/src/forms/common/wrapped-control.ts index 6778db2df7..1c7a9c4b4c 100644 --- a/projects/angular/src/forms/common/wrapped-control.ts +++ b/projects/angular/src/forms/common/wrapped-control.ts @@ -58,6 +58,7 @@ export class WrappedFormControl implements OnInit, DoC private _containerInjector: Injector; private differs: KeyValueDiffers; private differ: KeyValueDiffer; + private additionalDiffer = new Map>(); private ngControl: NgControl | null; // I lost way too much time trying to make this work without injecting the ViewContainerRef and the Injector, @@ -113,6 +114,10 @@ export class WrappedFormControl implements OnInit, DoC } } + private get hasAdditionalControls() { + return this.additionalDiffer.size > 0; + } + ngOnInit() { this._containerInjector = new HostWrapper(this.wrapperType, this.vcr, this.index); this.controlIdService = this._containerInjector.get(ControlIdService); @@ -136,12 +141,18 @@ export class WrappedFormControl implements OnInit, DoC } else { this.ngControl = this.ngControlService.getControl(); this.ngControlService.addAdditionalControl(this._ngControl); + this.additionalDiffer.set(this._ngControl, this.differs.find(this._ngControl).create()); } } } ngDoCheck() { this.triggerDoCheck(this.differ, this.ngControl); + if (this.hasAdditionalControls) { + for (const [ngControl, differ] of this.additionalDiffer) { + this.triggerDoCheck(differ, ngControl); + } + } } triggerDoCheck(differ, ngControl) { diff --git a/projects/angular/src/forms/datepicker/date-input-base.ts b/projects/angular/src/forms/datepicker/date-input-base.ts index 72df5a63e5..0b41ca9194 100644 --- a/projects/angular/src/forms/datepicker/date-input-base.ts +++ b/projects/angular/src/forms/datepicker/date-input-base.ts @@ -184,17 +184,19 @@ export class ClrDateInputBase extends WrappedFormControl imple * if either of the field gets updated */ protected validateDateRange() { - const primaryControl = this.ngControlService?.getControl(); - const additionalControls = this.ngControlService?.getAdditionalControls(); - const isValid = this.dateNavigationService.selectedDay?.isBefore(this.dateNavigationService.selectedEndDay, true); - if ( - isValid && - (primaryControl?.hasError('range') || additionalControls?.some(control => control.hasError('range'))) - ) { - primaryControl.control?.updateValueAndValidity(); - additionalControls.forEach((ngControl: NgControl) => { - ngControl?.control?.updateValueAndValidity(); - }); + if (this.dateNavigationService.isRangePicker) { + const primaryControl = this.ngControlService?.getControl(); + const additionalControls = this.ngControlService?.getAdditionalControls(); + const isValid = this.dateNavigationService.selectedDay?.isBefore(this.dateNavigationService.selectedEndDay, true); + if ( + isValid && + (primaryControl?.hasError('range') || additionalControls?.some(control => control.hasError('range'))) + ) { + primaryControl.control?.updateValueAndValidity(); + additionalControls.forEach((ngControl: NgControl) => { + ngControl?.control?.updateValueAndValidity(); + }); + } } }