feat: use conditional formatting for signal forms

Author: manfredsteyer

src/app/app.config.ts

@@ -4,6 +4,8 @@ import {
   provideAppInitializer,
   provideBrowserGlobalErrorListeners,
 } from '@angular/core';
+import { provideSignalFormsConfig } from '@angular/forms/signals';
+import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { provideHashbrown } from '@hashbrownai/angular';
 import { provideMarkdown } from 'ngx-markdown';
@@ -16,6 +18,16 @@ export const appConfig: ApplicationConfig = {
     provideBrowserGlobalErrorListeners(),
     provideAppInitializer(() => inject(ConfigService).load()),
     // provideHttpClient(withInterceptors([authInterceptor])),
+    provideSignalFormsConfig({
+      // classes: {
+      //   'ng-invalid': (field) => field.state().invalid(),
+      //   'ng-valid': (field) => field.state().valid(),
+      //   'ng-dirty': (field) => field.state().dirty(),
+      //   'ng-pristine': (field) => !field.state().dirty(),
+      //   'ng-pending': (field) => field.state().pending(),
+      // },
+      classes: NG_STATUS_CLASSES,
+    }),
     provideRouter(routes, withComponentInputBinding()),
     provideHashbrown({
       baseUrl: 'http://localhost:3000/api/chat',

src/app/domains/shared/ui-forms/validation-errors/validation-errors-pane.ts

@@ -4,7 +4,11 @@ import {
   computed,
   input,
 } from '@angular/core';
-import { MinValidationError, ValidationError } from '@angular/forms/signals';
+import {
+  MinLengthValidationError,
+  MinValidationError,
+  ValidationError,
+} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-validation-errors-pane',
@@ -46,6 +50,8 @@ function toMessage(error: ValidationError): string {
       return 'Roundtrips are not supported!';
     case 'min':
       return `Minimum amount: ${(error as MinValidationError).min}`;
+    case 'minLength':
+      return `Please enter at least ${(error as MinLengthValidationError).minLength} characters!`;
     default:
       return error.kind ?? 'Validation Error';
   }

src/app/domains/ticketing/data/flight-schema.ts

@@ -30,9 +30,9 @@ export const flightSchema = schema<Flight>((path) => {
   // validateStandardSchema(path, FlightZodSchema);
 
   // disabled(path.delay, (ctx) => !ctx.valueOf(path.delayed));
-  disabled(path.delay, (ctx) =>
-    ctx.valueOf(path.delayed) ? false : 'not delayed',
-  );
+  disabled(path.delay, {
+    when: (ctx) => (ctx.valueOf(path.delayed) ? false : 'not delayed'),
+  });
 
   applyWhenValue(path, (flight) => flight.delayed, delayedFlight);
 

src/styles.css

@@ -1200,3 +1200,19 @@ td.error-col app-validation-errors-pane {
     transform: rotate(360deg);
   }
 }
+
+/* ══════════════════════════════════════════
+   6. Signal Forms
+   ══════════════════════════════════════════ */
+
+input.ng-valid {
+  border-left: 3px solid darkseagreen;
+}
+
+input.ng-invalid.ng-dirty {
+  border-left: 3px solid var(--color-error);
+}
+
+input.ng-pending {
+  border-left: 3px solid var(--color-border);
+}