diff --git a/frontend/src/app/pages/event-root/create-event/create-event.component.html b/frontend/src/app/pages/event-root/create-event/create-event.component.html
index ae2d82f..e280ad0 100644
--- a/frontend/src/app/pages/event-root/create-event/create-event.component.html
+++ b/frontend/src/app/pages/event-root/create-event/create-event.component.html
@@ -51,13 +51,10 @@
@if (currentStep() < steps.length - 1) {
}
diff --git a/frontend/src/app/pages/event-root/create-event/create-event.component.ts b/frontend/src/app/pages/event-root/create-event/create-event.component.ts
index b2faf48..eb06dd3 100644
--- a/frontend/src/app/pages/event-root/create-event/create-event.component.ts
+++ b/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 = signal(0);
public readonly steps: string[] = ['Basic', 'Tickets', 'Review'];
public form!: FormGroup;
+ public isCurrentStepValid: WritableSignal = signal(false);
+ public hasAttemptedNextStep: WritableSignal = 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
- // Für Demonstrationszwecke nehmen wir an, dass der erste Schritt immer gültig ist,
- // und die anderen zufällig gültig oder ungültig sind
- return true;
-
- // In Zukunft könnte es so aussehen:
- // switch(stepIndex) {
- // case 0: return this.isBasicStepValid();
- // case 1: return this.isTicketsStepValid();
- // case 2: return this.isReviewStepValid();
- // default: return false;
- // }
+ switch (stepIndex) {
+ case 0:
+ return this.form.valid;
+ case 1:
+ // TODO: Implement validation for Tickets step
+ return true;
+ case 2:
+ // TODO: Implement validation for Review step
+ return true;
+ default:
+ 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]}`;
+ }
}