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();
}