diff --git a/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.html b/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.html index a7a9b34..7604b4a 100644 --- a/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.html +++ b/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.html @@ -7,23 +7,12 @@ Location Name Name of the location -
- - - - -
+
@@ -37,6 +26,7 @@
@@ -52,6 +42,7 @@ Name of the city @@ -69,6 +60,7 @@ Name of the street @@ -84,6 +76,7 @@ diff --git a/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.ts b/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.ts index 3e2dbf7..42e2524 100644 --- a/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.ts +++ b/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.ts @@ -1,5 +1,11 @@ import { CommonModule } from '@angular/common'; -import { Component, output, OutputEmitterRef } from '@angular/core'; +import { + Component, + output, + OutputEmitterRef, + signal, + WritableSignal, +} from '@angular/core'; import { FormBuilder, FormGroup, @@ -24,18 +30,33 @@ export class LocationDialogComponent { public locationCreated: OutputEmitterRef = output(); public locationForm: FormGroup = new FormGroup({}); + public formSubmitted: WritableSignal = signal(false); public constructor(private readonly formBuilder: FormBuilder) { this.locationForm = this.formBuilder.group({ + name: ['', [Validators.required, Validators.minLength(3)]], postalCode: ['', [Validators.required, Validators.pattern(/^\d{5}$/)]], - city: ['', Validators.required], - street: ['', Validators.required], - houseNumber: ['', Validators.required], - name: ['', Validators.required], + city: ['', [Validators.required, Validators.minLength(2)]], + street: ['', [Validators.required, Validators.minLength(3)]], + houseNumber: [ + '', + [Validators.required, Validators.pattern(/^[0-9]+[a-zA-Z]?$/)], + ], }); } + public getInputClass(controlName: string): string { + const control = this.locationForm.get(controlName); + + if ((control?.dirty || this.formSubmitted()) && control?.touched) { + return control.valid ? 'input-success' : 'input-error'; + } + return ''; + } + public createLocation(): void { + this.formSubmitted.set(true); + this.locationForm.markAllAsTouched(); if (this.locationForm.valid) { this.locationCreated.emit(this.locationForm.value); this.closeModal(); @@ -47,6 +68,10 @@ export class LocationDialogComponent { 'location_modal' ) as HTMLDialogElement; + this.locationForm.reset(); + this.locationForm.markAsUntouched(); + this.locationForm.markAsPristine(); + this.formSubmitted.set(false); modal.showModal(); }