added step validation
This commit is contained in:
parent
e97743ef17
commit
1475b13360
|
@ -51,13 +51,10 @@
|
||||||
@if (currentStep() < steps.length - 1) {
|
@if (currentStep() < steps.length - 1) {
|
||||||
<button
|
<button
|
||||||
type="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>
|
<span>
|
||||||
Next to
|
{{ getNextButtonText() }}
|
||||||
<span class="font-bold">{{ steps[currentStep() + 1] }}</span>
|
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {
|
||||||
ChangeDetectionStrategy,
|
ChangeDetectionStrategy,
|
||||||
signal,
|
signal,
|
||||||
WritableSignal,
|
WritableSignal,
|
||||||
|
effect,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
|
||||||
|
@ -22,6 +23,8 @@ export class CreateEventComponent {
|
||||||
public currentStep: WritableSignal<number> = signal(0);
|
public currentStep: WritableSignal<number> = signal(0);
|
||||||
public readonly steps: string[] = ['Basic', 'Tickets', 'Review'];
|
public readonly steps: string[] = ['Basic', 'Tickets', 'Review'];
|
||||||
public form!: FormGroup;
|
public form!: FormGroup;
|
||||||
|
public isCurrentStepValid: WritableSignal<boolean> = signal(false);
|
||||||
|
public hasAttemptedNextStep: WritableSignal<boolean> = signal(false);
|
||||||
|
|
||||||
public constructor(private readonly formBuilder: FormBuilder) {
|
public constructor(private readonly formBuilder: FormBuilder) {
|
||||||
this.form = this.formBuilder.group({
|
this.form = this.formBuilder.group({
|
||||||
|
@ -30,6 +33,18 @@ export class CreateEventComponent {
|
||||||
eventDate: ['', Validators.required],
|
eventDate: ['', Validators.required],
|
||||||
eventTime: ['', 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 {
|
public getStepContent(index: number): string {
|
||||||
|
@ -58,23 +73,28 @@ export class CreateEventComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
public isStepValid(stepIndex: number): boolean {
|
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;
|
||||||
|
case 1:
|
||||||
|
// TODO: Implement validation for Tickets step
|
||||||
return true;
|
return true;
|
||||||
|
case 2:
|
||||||
// In Zukunft könnte es so aussehen:
|
// TODO: Implement validation for Review step
|
||||||
// switch(stepIndex) {
|
return true;
|
||||||
// case 0: return this.isBasicStepValid();
|
default:
|
||||||
// case 1: return this.isTicketsStepValid();
|
return false;
|
||||||
// case 2: return this.isReviewStepValid();
|
}
|
||||||
// default: return false;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public nextStep(): void {
|
public nextStep(): void {
|
||||||
if (this.currentStep() < this.steps.length - 1) {
|
if (this.currentStep() < this.steps.length - 1) {
|
||||||
|
if (this.isCurrentStepValid()) {
|
||||||
this.currentStep.set(this.currentStep() + 1);
|
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);
|
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]}`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue