disable submit button when form is not valid

puzzle · Oct 4, 2023 · 10355fb · 10355fb
1 parent 7722f9d
commit 10355fb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -42,12 +42,14 @@ <h1 class="title ms-2" *ngIf="continued">(2/2)</h1>
     Weiter
   </button>
   <button
+    [disabled]="!this.dialogForm.valid"
     (click)="saveCheckIn()"
     *ngIf="continued"
     type="submit"
     mat-button
     mat-dialog-close
-    class="submit mb-3 pe-3 pt-1 pb-1 fw-bold text-white"
+    [ngClass]="dialogForm.valid ? 'submit' : 'disabled'"
+    class="mb-3 pe-3 pt-1 pb-1 fw-bold text-white"
   >
     Check-in erfassen
   </button>

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
@@ -9,3 +9,7 @@
   background-color: white;
   color: $pz-dark-blue;
 }
+
+.disabled {
+  background-color: gray;
+}