diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
index 9f170dff8c..11e0d6abc2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
@@ -76,6 +76,14 @@
widgets.gauge.max-value-short
+
+ warning
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts
index c3850db5ee..bb0eae4faf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts
@@ -14,7 +14,7 @@
/// limitations under the License.
///
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
@@ -109,7 +109,7 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom
showMinMax: [settings.showMinMax, []],
minValue: [settings.minValue, []],
- maxValue: [settings.maxValue, []],
+ maxValue: [settings.maxValue, [this.maxValueValidation()]],
minMaxFont: [settings.minMaxFont, []],
minMaxColor: [settings.minMaxFont?.color, []],
@@ -182,11 +182,29 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom
return this.widgetConfig;
}
+ private maxValueValidation(): ValidatorFn {
+ return (control: AbstractControl): ValidationErrors | null => {
+ const value: string = control.value;
+ if (value) {
+ if (value < control.parent?.get('minValue').value) {
+ return {maxValue: true};
+ }
+ }
+ return null;
+ };
+ }
+
protected validatorTriggers(): string[] {
- return ['gaugeType', 'showValue', 'showTitle', 'showMinMax'];
+ return ['gaugeType', 'showValue', 'showTitle', 'showMinMax', 'minValue'];
}
protected updateValidators(emitEvent: boolean, trigger?: string) {
+ if (trigger === 'minValue') {
+ this.simpleGaugeWidgetConfigForm.get('maxValue').updateValueAndValidity({emitEvent: true});
+ this.simpleGaugeWidgetConfigForm.get('maxValue').markAsTouched({onlySelf: true});
+ return;
+ }
+
const isDonut = this.simpleGaugeWidgetConfigForm.get('gaugeType').value === this.digitalGaugeType.donut;
if (isDonut) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
index 62cacf0730..173d2102d6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
@@ -65,6 +65,14 @@
widgets.gauge.max-value-short
+
+ warning
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts
index 5a4289a8d2..5de1b77b18 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts
@@ -16,7 +16,14 @@
import { Datasource, WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { Component } from '@angular/core';
-import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+ AbstractControl,
+ UntypedFormArray,
+ UntypedFormBuilder,
+ UntypedFormGroup, ValidationErrors,
+ ValidatorFn,
+ Validators
+} from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { GaugeType } from '@home/components/widget/lib/canvas-digital-gauge';
@@ -167,7 +174,7 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent
donutStartAngle: [settings.donutStartAngle, []],
showMinMax: [settings.showMinMax, []],
minValue: [settings.minValue, []],
- maxValue: [settings.maxValue, []],
+ maxValue: [settings.maxValue, [this.maxValueValidation()]],
minMaxFont: [settings.minMaxFont, []],
minMaxColor: [settings.minMaxFont.color, []],
@@ -206,6 +213,18 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent
});
}
+ private maxValueValidation(): ValidatorFn {
+ return (control: AbstractControl): ValidationErrors | null => {
+ const value: string = control.value;
+ if (value) {
+ if (value < control.parent?.get('minValue').value) {
+ return {maxValue: true};
+ }
+ }
+ return null;
+ };
+ }
+
protected prepareOutputSettings(settings) {
const barColor: ColorSettings = this.digitalGaugeWidgetSettingsForm.get('barColor').value;
@@ -230,10 +249,15 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent
}
protected validatorTriggers(): string[] {
- return ['gaugeType', 'showTitle', 'showUnitTitle', 'showValue', 'showMinMax', 'showTimestamp', 'showTicks', 'animation'];
+ return ['gaugeType', 'showTitle', 'showUnitTitle', 'showValue', 'showMinMax', 'showTimestamp', 'showTicks', 'animation', 'minValue'];
}
- protected updateValidators(emitEvent: boolean) {
+ protected updateValidators(emitEvent: boolean, trigger: string) {
+ if (trigger === 'minValue') {
+ this.digitalGaugeWidgetSettingsForm.get('maxValue').updateValueAndValidity({emitEvent: true});
+ this.digitalGaugeWidgetSettingsForm.get('maxValue').markAsTouched({onlySelf: true});
+ return;
+ }
const gaugeType: GaugeType = this.digitalGaugeWidgetSettingsForm.get('gaugeType').value;
const showTitle: boolean = this.digitalGaugeWidgetSettingsForm.get('showTitle').value;
const showUnitTitle: boolean = this.digitalGaugeWidgetSettingsForm.get('showUnitTitle').value;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 9a3db843db..a35e41c7b8 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -6282,7 +6282,8 @@
"min-and-max-value": "Min and max value",
"min-and-max-label": "Min and max label",
"font": "Font",
- "tick-width-and-color": "Tick width and color"
+ "tick-width-and-color": "Tick width and color",
+ "min-max-validation-text": "Max value must be bigger than min value"
},
"gpio": {
"pin": "Pin",