From 56d7ab3bb6dd193d25c174f3d0927a668481f42c Mon Sep 17 00:00:00 2001 From: Chantsova Ekaterina Date: Thu, 12 Sep 2024 11:46:06 +0300 Subject: [PATCH] Timewindow: datapoints limit validation fix --- .../time/datapoints-limit.component.ts | 44 ++++++++++++++----- .../timewindow-config-dialog.component.ts | 11 +---- .../time/timewindow-panel.component.ts | 11 +---- 3 files changed, 35 insertions(+), 31 deletions(-) diff --git a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.ts b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.ts index 21aff5a647..6818c2522d 100644 --- a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.ts +++ b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.ts @@ -15,9 +15,17 @@ /// import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR, UntypedFormGroup, Validators } from '@angular/forms'; +import { + ControlValueAccessor, + FormBuilder, + FormGroup, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + ValidationErrors, + Validator, + Validators +} from '@angular/forms'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; -import { getTimezoneInfo } from '@shared/models/time/time.models'; import { TimeService } from '@core/services/time.service'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @@ -26,15 +34,22 @@ import { Subject } from 'rxjs'; selector: 'tb-datapoints-limit', templateUrl: './datapoints-limit.component.html', styleUrls: ['./datapoints-limit.component.scss'], - providers: [{ + providers: [ + { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatapointsLimitComponent), multi: true - }] + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => DatapointsLimitComponent), + multi: true + } + ] }) -export class DatapointsLimitComponent implements ControlValueAccessor, OnInit, OnDestroy { +export class DatapointsLimitComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy { - datapointsLimitFormGroup: UntypedFormGroup; + datapointsLimitFormGroup: FormGroup; modelValue: number | null; @@ -71,7 +86,7 @@ export class DatapointsLimitComponent implements ControlValueAccessor, OnInit, O ngOnInit() { this.datapointsLimitFormGroup = this.fb.group({ - limit: [null] + limit: [null, [Validators.min(this.minDatapointsLimit()), Validators.max(this.maxDatapointsLimit())]] }); this.datapointsLimitFormGroup.get('limit').valueChanges.pipe( takeUntil(this.destroy$) @@ -82,10 +97,11 @@ export class DatapointsLimitComponent implements ControlValueAccessor, OnInit, O updateValidators() { if (this.datapointsLimitFormGroup) { - this.datapointsLimitFormGroup.get('limit').setValidators(this.required - ? [Validators.required, Validators.min(this.minDatapointsLimit()), - Validators.max(this.maxDatapointsLimit())] - : []); + if (this.required) { + this.datapointsLimitFormGroup.get('limit').addValidators(Validators.required); + } else { + this.datapointsLimitFormGroup.get('limit').removeValidators(Validators.required); + } this.datapointsLimitFormGroup.get('limit').updateValueAndValidity(); } } @@ -122,6 +138,12 @@ export class DatapointsLimitComponent implements ControlValueAccessor, OnInit, O } } + validate(): ValidationErrors { + return this.datapointsLimitFormGroup.get('limit').valid ? null : { + datapointsLimitFormGroup: false, + }; + } + minDatapointsLimit() { return this.timeService.getMinDatapointsLimit(); } diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts index cb16d7694a..2e33ef0390 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts @@ -296,8 +296,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On if (aggType !== AggregationType.NONE) { this.timewindowForm.get('aggregation.limit').clearValidators(); } else { - this.timewindowForm.get('aggregation.limit').setValidators([Validators.min(this.minDatapointsLimit()), - Validators.max(this.maxDatapointsLimit())]); + this.timewindowForm.get('aggregation.limit').setValidators([Validators.required]); } this.timewindowForm.get('aggregation.limit').updateValueAndValidity({emitEvent: false}); } @@ -351,14 +350,6 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On this.dialogRef.close(); } - minDatapointsLimit() { - return this.timeService.getMinDatapointsLimit(); - } - - maxDatapointsLimit() { - return this.timeService.getMaxDatapointsLimit(); - } - minRealtimeAggInterval() { return this.timeService.minIntervalLimit(this.currentRealtimeTimewindow()); } diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts index 7b0286383a..844815f51a 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts @@ -307,8 +307,7 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O if (aggType !== AggregationType.NONE) { this.timewindowForm.get('aggregation.limit').clearValidators(); } else { - this.timewindowForm.get('aggregation.limit').setValidators([Validators.min(this.minDatapointsLimit()), - Validators.max(this.maxDatapointsLimit())]); + this.timewindowForm.get('aggregation.limit').setValidators([Validators.required]); } this.timewindowForm.get('aggregation.limit').updateValueAndValidity({emitEvent: false}); } @@ -456,14 +455,6 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O this.overlayRef.dispose(); } - minDatapointsLimit() { - return this.timeService.getMinDatapointsLimit(); - } - - maxDatapointsLimit() { - return this.timeService.getMaxDatapointsLimit(); - } - minRealtimeAggInterval() { return this.timeService.minIntervalLimit(this.currentRealtimeTimewindow()); }