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

@@ -7,23 +7,12 @@
           <span class="label-text">Location Name</span>
           <span class="label-text-alt">Name of the location</span>
         </div>
-        <div class="input input-bordered flex items-center gap-2">
         <input
+          [ngClass]="getInputClass('name')"
           formControlName="name"
           type="text"
-            class="grow"
+          class="input input-bordered w-full"
           placeholder="" />
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            class="h-4 w-4 opacity-70">
-            <path
-              fill-rule="evenodd"
-              d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-              clip-rule="evenodd" />
-          </svg>
-        </div>
         <div class="label">
           <span class="label-text-alt"></span>
           <span class="label-text-alt"></span>
@@ -37,6 +26,7 @@
             <span class="label-text-alt"></span>
           </div>
           <input
+            [ngClass]="getInputClass('postalCode')"
             type="text"
             formControlName="postalCode"
             class="input input-bordered w-full" />
@@ -52,6 +42,7 @@
             <span class="label-text-alt">Name of the city</span>
           </div>
           <input
+            [ngClass]="getInputClass('city')"
             type="text"
             formControlName="city"
             class="input input-bordered w-full" />
@@ -69,6 +60,7 @@
             <span class="label-text-alt">Name of the street</span>
           </div>
           <input
+            [ngClass]="getInputClass('street')"
             type="text"
             formControlName="street"
             class="input input-bordered w-full" />
@@ -84,6 +76,7 @@
             <span class="label-text-alt"></span>
           </div>
           <input
+            [ngClass]="getInputClass('houseNumber')"
             type="text"
             formControlName="houseNumber"
             class="input input-bordered w-full" />

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<EventLocation> =
     output<EventLocation>();
   public locationForm: FormGroup = new FormGroup({});
+  public formSubmitted: WritableSignal<boolean> = signal<boolean>(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();
   }