Timewindow: datapoints limit validation fix

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
+      if (this.required) {
-        ? [Validators.required, Validators.min(this.minDatapointsLimit()),
+        this.datapointsLimitFormGroup.get('limit').addValidators(Validators.required);
-          Validators.max(this.maxDatapointsLimit())]
+      } 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();
   }

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()),
+      this.timewindowForm.get('aggregation.limit').setValidators([Validators.required]);
-        Validators.max(this.maxDatapointsLimit())]);
     }
     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());
   }

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()),
+      this.timewindowForm.get('aggregation.limit').setValidators([Validators.required]);
-        Validators.max(this.maxDatapointsLimit())]);
     }
     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());
   }