refactor: switch to component usage

Author: d-koppenhagen

src/app/form-field-info/form-field-info.html

@@ -0,0 +1,5 @@
+@for (message of messages(); track $index) {
+<small [class]="message.cssClass">{{ message.info }}.</small>
+@if(!$last) {
+<br />
+} }

src/app/form-field-info/form-field-info.scss

@@ -0,0 +1,16 @@
+small {
+  position: relative;
+  top: -1rem;
+
+  &.pending {
+    color: #886b02;
+  }
+
+  &.invalid {
+    color: var(--pico-del-color);
+  }
+
+  &.valid {
+    color: var(--pico-ins-color);
+  }
+}

src/app/form-field-info/form-field-info.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormFieldInfo } from './form-field-info';
+
+describe('FormFieldInfo', () => {
+  let component: FormFieldInfo;
+  let fixture: ComponentFixture<FormFieldInfo>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormFieldInfo]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FormFieldInfo);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/form-field-info/form-field-info.ts

@@ -0,0 +1,28 @@
+import { Component, computed, input, signal } from '@angular/core';
+import { FieldTree } from '@angular/forms/signals';
+
+import { FIELD_INFO } from '../form-props';
+
+@Component({
+  selector: 'app-form-field-info',
+  imports: [],
+  templateUrl: './form-field-info.html',
+  styleUrl: './form-field-info.scss',
+})
+export class FormFieldInfo<T> {
+  readonly fieldRef = input.required<FieldTree<T>>();
+
+  protected readonly messages = computed(() => {
+    const field = this.fieldRef()();
+    let messages: { info: string; cssClass: 'info' | 'pending' | 'valid' | 'invalid' }[] = [];
+
+    if (field.pending()) {
+      messages = [{ info: 'Checking availability ...', cssClass: 'pending' }];
+    } else if (field.touched() && field.errors().length > 0) {
+      messages = field.errors().map((e) => ({ info: e.message || 'Invalid', cssClass: 'invalid' }));
+    } else if (field.hasMetadata(FIELD_INFO)) {
+      messages = [{ info: field.metadata(FIELD_INFO)!, cssClass: field.valid() ? 'valid': 'info' }];
+    }
+    return messages;
+  });
+}

src/app/form-props.ts

@@ -0,0 +1,3 @@
+import { createMetadataKey } from "@angular/forms/signals";
+
+export const FIELD_INFO = createMetadataKey<string>()

src/app/registration-form-3/registration-form-3.html

@@ -11,13 +11,11 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
     >Username
     <input
       type="text"
+      id="myField"
       [field]="registrationForm.username"
       [aria-invalid]="ariaInvalidState(registrationForm.username)"
     />
-    @if (registrationForm.username().pending()) {
-      <small>Checking availability ...</small>
-    }
-    <app-form-error [fieldRef]="registrationForm.username" />
+    <app-form-field-info [fieldRef]="registrationForm.username" />
   </label>
 
   <!-- A whole child form with own model -->
@@ -32,7 +30,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
         [field]="registrationForm.age"
         [aria-invalid]="ariaInvalidState(registrationForm.age)"
       />
-      <app-form-error [fieldRef]="registrationForm.age" />
+      <app-form-field-info [fieldRef]="registrationForm.age" />
     </label>
   </div>
 
@@ -45,7 +43,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
         [field]="registrationForm.password.pw1"
         [aria-invalid]="ariaInvalidState(registrationForm.password.pw1)"
       />
-      <app-form-error [fieldRef]="registrationForm.password.pw1" />
+      <app-form-field-info [fieldRef]="registrationForm.password.pw1" />
     </label>
     <label
       >Password Confirmation
@@ -55,9 +53,9 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
         [field]="registrationForm.password.pw2"
         [aria-invalid]="ariaInvalidState(registrationForm.password.pw2)"
       />
-      <app-form-error [fieldRef]="registrationForm.password.pw2" />
+      <app-form-field-info [fieldRef]="registrationForm.password.pw2" />
     </label>
-    <app-form-error [fieldRef]="registrationForm.password" />
+    <app-form-field-info [fieldRef]="registrationForm.password" />
   </div>
   <fieldset>
     <legend>
@@ -76,11 +74,11 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
           />
           <button type="button" (click)="removeEmail($index)">-</button>
         </div>
-        <app-form-error [fieldRef]="emailField" />
+        <app-form-field-info [fieldRef]="emailField" />
       </div>
       }
     </div>
-    <app-form-error [fieldRef]="registrationForm.email" />
+    <app-form-field-info [fieldRef]="registrationForm.email" />
   </fieldset>
   <label
     >Subscribe to Newsletter?
@@ -91,7 +89,7 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
     [selectOptions]="['Angular', 'React', 'Vue', 'Svelte']"
     label="Topics (multiple possible):"
   />
-  <app-form-error [fieldRef]="registrationForm.newsletterTopics" />
+  <app-form-field-info [fieldRef]="registrationForm.newsletterTopics" />
   <label
     >I agree to the terms and conditions
     <input
@@ -100,9 +98,9 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
       [field]="registrationForm.agreeToTermsAndConditions"
     />
   </label>
-  <app-form-error [fieldRef]="registrationForm.agreeToTermsAndConditions" />
+  <app-form-field-info [fieldRef]="registrationForm.agreeToTermsAndConditions" />
   <hr />
-  <app-form-error [fieldRef]="registrationForm" />
+  <app-form-field-info [fieldRef]="registrationForm" />
   <div role="group">
     <button
       type="submit"

src/app/registration-form-3/registration-form-3.ts

@@ -1,9 +1,10 @@
 import { Component, inject, resource, signal } from '@angular/core';
-import { apply, applyEach, applyWhen, debounce, disabled, email, Field, FieldTree, form, maxLength, min, minLength, pattern, required, schema, submit, validate, validateAsync, validateTree, ValidationError, WithField } from '@angular/forms/signals';
+import { apply, applyEach, applyWhen, debounce, disabled, email, Field, FieldTree, form, maxLength, metadata, min, minLength, pattern, required, schema, submit, validate, validateAsync, validateTree, ValidationError, WithField } from '@angular/forms/signals';
 
 import { BackButton } from '../back-button/back-button';
 import { DebugOutput } from '../debug-output/debug-output';
-import { FormError } from '../form-error/form-error';
+import { FormFieldInfo } from '../form-field-info/form-field-info';
+import { FIELD_INFO } from '../form-props';
 import { GenderIdentity, IdentityForm, identitySchema, initialGenderIdentityState } from '../identity-form/identity-form';
 import { Multiselect } from '../multiselect/multiselect';
 import { RegistrationService } from '../registration-service';
@@ -60,6 +61,7 @@ export const formSchema = schema<RegisterFormData>((schemaPath) => {
     },
     onError: () => undefined
   });
+  metadata(schemaPath.username, FIELD_INFO, () => "A username must consists of 3-12 characters.")
 
   // Age validation
   min(schemaPath.age, 18, { message: 'You must be >=18 years old.' });
@@ -81,6 +83,7 @@ export const formSchema = schema<RegisterFormData>((schemaPath) => {
   applyEach(schemaPath.email, (emailPath) => {
     email(emailPath, { message: 'E-Mail format is invalid' });
   });
+  metadata(schemaPath.email, FIELD_INFO, () => "Please enter at least one valid E-Mail address")
 
   // Password validation
   required(schemaPath.password.pw1, { message: 'A password is required' });
@@ -104,6 +107,7 @@ export const formSchema = schema<RegisterFormData>((schemaPath) => {
           message: 'The entered password must match with the one specified in "Password" field',
         };
   });
+  metadata(schemaPath.password, FIELD_INFO, () => "Please enter a password with min 8 characters and a special character.")
 
   // Newsletter validation
   applyWhen(
@@ -130,7 +134,7 @@ export const formSchema = schema<RegisterFormData>((schemaPath) => {
 
 @Component({
   selector: 'app-registration-form-3',
-  imports: [BackButton, Field, DebugOutput, FormError, IdentityForm, Multiselect],
+  imports: [BackButton, Field, DebugOutput, FormFieldInfo, IdentityForm, Multiselect],
   templateUrl: './registration-form-3.html',
   styleUrl: './registration-form-3.scss',
   // Also possible: set SignalFormsConfig only for local component: