diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html
index a7ccc25fe6..f48819da74 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-form-panel no-border no-padding" [formGroup]="alarmRuleFormGroup">
+<div class="tb-form-panel no-border no-padding" [class.disabled]="disabled" [formGroup]="alarmRuleFormGroup">
   <tb-cf-alarm-rule-condition formControlName="condition" [arguments]="arguments" [required]="required" [testScript]="testScript" [isClearCondition]="isClearCondition">
   </tb-cf-alarm-rule-condition>
   <div class="tb-form-row space-between column-xs">
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.ts b/ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.ts
index 15d9858817..d5ec210f34 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.ts
@@ -114,7 +114,7 @@ export class CreateCfAlarmRulesComponent implements ControlValueAccessor, Valida
         }
         createAlarmRulesControls.push(this.fb.group({
           severity: [severity, Validators.required],
-          alarmRule: {value: [createAlarmRule, Validators.required], disabled: this.disabled}
+          alarmRule: [{value: createAlarmRule, disabled: this.disabled}, Validators.required]
         }));
       });
     }