feat: Admin Area General Settings and Categories 1.06

frontend/src/app/features/admin/general.component.ts

@@ -10,6 +10,7 @@ import {
   datetimeMessage,
   deriveEventState,
   endAfterStartValidator,
+  endBeforeStartMessage,
   isoDatetimeValidator,
   normalizePageTitle,
   pageTitleMessage,
@@ -113,14 +114,17 @@ import {
                 type="datetime-local"
                 formControlName="eventEndUtc"
                 data-testid="general-eventEnd"
-                [attr.aria-invalid]="showEventEndError() || (form.controls.eventEndUtc.touched && !!form.error?.['endBeforeStart']) ? 'true' : null"
-                [attr.aria-describedby]="(showEventEndError() || (form.controls.eventEndUtc.touched && !!form.error?.['endBeforeStart'])) ? 'general-eventEnd-error general-endBeforeStart' : null"
+                [attr.aria-invalid]="showEventEndError() || eventEndCrossFieldError() ? 'true' : null"
+                [attr.aria-describedby]="(showEventEndError() || eventEndCrossFieldError())
+                  ? 'general-eventEnd-error general-endBeforeStart'
+                  : null"
+                [attr.title]="(showEventEndError() ? eventEndMessage() : eventEndCrossFieldError() ? endBeforeStartMessage : null)"
               />
               @if (showEventEndError()) {
                 <div class="field-error" id="general-eventEnd-error" data-testid="general-eventEnd-error">{{ eventEndMessage() }}</div>
               }
-              @if (form.controls.eventEndUtc.touched && form.error?.['endBeforeStart']) {
-                <div class="field-error" id="general-endBeforeStart" data-testid="general-endBeforeStart">Event end must be after event start.</div>
+              @if (eventEndCrossFieldError()) {
+                <div class="field-error" id="general-endBeforeStart" data-testid="general-endBeforeStart">{{ endBeforeStartMessage }}</div>
               }
             </div>
 
@@ -256,6 +260,10 @@ export class AdminGeneralComponent implements OnInit {
     datetimeMessage('Event end', this.eventEndValue(), this.form.controls.eventEndUtc.errors),
   );
 
+  readonly eventEndCrossFieldError = computed(
+    () => !!this.form.errors?.['endBeforeStart'],
+  );
+
   constructor() {
     this.form.controls.welcomeMarkdown.valueChanges
       .pipe(takeUntilDestroyed(this.destroyRef))