diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
index 2cba44d334..63d73bf578 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
@@ -110,8 +110,28 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
     this.colorSettingsFormGroup.get('type').valueChanges.pipe(
       takeUntilDestroyed(this.destroyRef)
     ).subscribe(() => {
+      this.updateValidators();
       setTimeout(() => {this.popover?.updatePosition();}, 0);
     });
+    this.updateValidators();
+  }
+
+  updateValidators() {
+    const type: ColorType = this.colorSettingsFormGroup.get('type').value;
+    this.colorSettingsFormGroup.get('gradient').disable({emitEvent: false});
+    this.colorSettingsFormGroup.get('rangeList').disable({emitEvent: false});
+    this.colorSettingsFormGroup.get('colorFunction').disable({emitEvent: false});
+    switch (type) {
+      case ColorType.gradient:
+        this.colorSettingsFormGroup.get('gradient').enable({emitEvent: false});
+        break;
+      case ColorType.range:
+        this.colorSettingsFormGroup.get('rangeList').enable({emitEvent: false});
+        break;
+      case ColorType.function:
+        this.colorSettingsFormGroup.get('colorFunction').enable({emitEvent: false});
+        break;
+    }
   }
 
   copyColorSettings(comp: ColorSettingsComponent) {
@@ -131,7 +151,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
   }
 
   applyColorSettings() {
-    const colorSettings = this.colorSettingsFormGroup.value;
+    const colorSettings: ColorSettings = this.colorSettingsFormGroup.getRawValue();
     this.colorSettingsApplied.emit(colorSettings);
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts
index 895fb3e782..f083b00723 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts
@@ -101,7 +101,7 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen
   }
 
   applyColorSettings() {
-    const colorSettings: DataLayerColorSettings = this.colorSettingsFormGroup.value;
+    const colorSettings: DataLayerColorSettings = this.colorSettingsFormGroup.getRawValue();
     this.colorSettingsApplied.emit(colorSettings);
   }
 
@@ -122,8 +122,15 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen
     const type: DataLayerColorType = this.colorSettingsFormGroup.get('type').value;
     if (type === DataLayerColorType.range) {
       this.colorSettingsFormGroup.get('rangeKey').enable({emitEvent: false});
+      this.colorSettingsFormGroup.get('range').enable({emitEvent: false});
     } else {
       this.colorSettingsFormGroup.get('rangeKey').disable({emitEvent: false});
+      this.colorSettingsFormGroup.get('range').disable({emitEvent: false});
+    }
+    if (type === DataLayerColorType.function) {
+      this.colorSettingsFormGroup.get('colorFunction').enable({emitEvent: false});
+    } else {
+      this.colorSettingsFormGroup.get('colorFunction').disable({emitEvent: false});
     }
   }
 }