frontend/src/app/pages/event-root/create-event/create-event.component.html

@@ -51,13 +51,10 @@
         @if (currentStep() < steps.length - 1) {
           <button
             type="button"
-            class="btn btn-primary btn-outline"
+            [class]="getNextButtonClass()"
-            (click)="nextStep()"
+            (click)="nextStep()">
-            [disabled]="currentStep() === steps.length - 1"
-            [class.opacity-50]="currentStep() === steps.length - 1">
             <span>
-              Next to
+              {{ getNextButtonText() }}
-              <span class="font-bold">{{ steps[currentStep() + 1] }}</span>
             </span>
           </button>
         }

frontend/src/app/pages/event-root/create-event/create-event.component.ts

@@ -4,6 +4,7 @@ import {
   ChangeDetectionStrategy,
   signal,
   WritableSignal,
+  effect,
 } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
@@ -22,6 +23,8 @@ export class CreateEventComponent {
   public currentStep: WritableSignal<number> = signal(0);
   public readonly steps: string[] = ['Basic', 'Tickets', 'Review'];
   public form!: FormGroup;
+  public isCurrentStepValid: WritableSignal<boolean> = signal(false);
+  public hasAttemptedNextStep: WritableSignal<boolean> = signal(false);
 
   public constructor(private readonly formBuilder: FormBuilder) {
     this.form = this.formBuilder.group({
@@ -30,6 +33,18 @@ export class CreateEventComponent {
       eventDate: ['', Validators.required],
       eventTime: ['', Validators.required],
     });
+
+    effect(() => {
+      this.isCurrentStepValid.set(this.isStepValid(this.currentStep()));
+      this.hasAttemptedNextStep.set(false); // Reset when step changes
+    });
+
+    this.form.valueChanges.subscribe(() => {
+      this.isCurrentStepValid.set(this.isStepValid(this.currentStep()));
+      if (this.isCurrentStepValid()) {
+        this.hasAttemptedNextStep.set(false); // Reset when form becomes valid
+      }
+    });
   }
 
   public getStepContent(index: number): string {
@@ -58,23 +73,28 @@ export class CreateEventComponent {
   }
 
   public isStepValid(stepIndex: number): boolean {
-    // TODO: Implementiere die tatsächliche Validierungslogik hier
+    switch (stepIndex) {
-    // Für Demonstrationszwecke nehmen wir an, dass der erste Schritt immer gültig ist,
+      case 0:
-    // und die anderen zufällig gültig oder ungültig sind
+        return this.form.valid;
-    return true;
+      case 1:
-
+        // TODO: Implement validation for Tickets step
-    // In Zukunft könnte es so aussehen:
+        return true;
-    // switch(stepIndex) {
+      case 2:
-    //   case 0: return this.isBasicStepValid();
+        // TODO: Implement validation for Review step
-    //   case 1: return this.isTicketsStepValid();
+        return true;
-    //   case 2: return this.isReviewStepValid();
+      default:
-    //   default: return false;
+        return false;
-    // }
+    }
   }
 
   public nextStep(): void {
     if (this.currentStep() < this.steps.length - 1) {
-      this.currentStep.set(this.currentStep() + 1);
+      if (this.isCurrentStepValid()) {
+        this.currentStep.set(this.currentStep() + 1);
+        this.hasAttemptedNextStep.set(false);
+      } else {
+        this.hasAttemptedNextStep.set(true);
+      }
     }
   }
 
@@ -83,4 +103,16 @@ export class CreateEventComponent {
       this.currentStep.set(this.currentStep() - 1);
     }
   }
+
+  public getNextButtonClass(): string {
+    return this.hasAttemptedNextStep() && !this.isCurrentStepValid()
+      ? 'btn btn-outline btn-warning'
+      : 'btn btn-primary btn-outline';
+  }
+
+  public getNextButtonText(): string {
+    return this.hasAttemptedNextStep() && !this.isCurrentStepValid()
+      ? 'Required Fields Missing'
+      : `Next to ${this.steps[this.currentStep() + 1]}`;
+  }
 }