version-2-version-3.diff

diff --git a/tmp/version-2/identity-form.html b/tmp/version-3/identity-form.html
index e69de29..70fa474 100644
--- a/tmp/version-2/identity-form.html
+++ b/tmp/version-3/identity-form.html
@@ -0,0 +1,30 @@
+<!-- TODO: remove @if, necessary due to a bug with <select> -->
+@if (identity()) {
+  <label
+    >Gender
+    <select [formField]="identity().gender"
+      (change)="updateSalutationAndPronoun()"
+    >
+      <option value="">Please select</option>
+      <option value="male">Male</option>
+      <option value="female">Female</option>
+      <option value="diverse">Diverse</option>
+    </select>
+  </label>
+
+  <div class="group-with-gap">
+    @if (!identity().salutation().hidden()) {
+    <label
+      >Salutation
+      <input type="text" placeholder="e. g. Mx." [formField]="identity().salutation" />
+      <app-form-error [fieldRef]="identity().salutation" />
+    </label>
+    } @if (!identity().pronoun().hidden()) {
+    <label
+      >Pronoun
+      <input type="text" placeholder="e. g. they/them" [formField]="identity().pronoun" />
+      <app-form-error [fieldRef]="identity().pronoun" />
+    </label>
+    }
+  </div>
+}
diff --git a/tmp/version-2/identity-form.ts b/tmp/version-3/identity-form.ts
index e69de29..ac83145 100644
--- a/tmp/version-2/identity-form.ts
+++ b/tmp/version-3/identity-form.ts
@@ -0,0 +1,51 @@
+import { Component, input } from '@angular/core';
+import { FormField, FieldTree, hidden, required, schema } from '@angular/forms/signals';
+
+import { FormError } from '../form-error/form-error';
+
+export interface GenderIdentity {
+  gender: '' | 'male' | 'female' | 'diverse';
+  salutation: string; // e. g. "Mx.", "Dr.", etc.
+  pronoun: string; // e. g. "they/them"
+}
+
+export const initialGenderIdentityState: GenderIdentity = {
+  gender: '',
+  salutation: '',
+  pronoun: '',
+};
+
+export const identitySchema = schema<GenderIdentity>((path) => {
+  hidden(path.salutation, (ctx) => {
+    return !ctx.valueOf(path.gender) || ctx.valueOf(path.gender) !== 'diverse';
+  });
+  hidden(path.pronoun, (ctx) => {
+    return !ctx.valueOf(path.gender) || ctx.valueOf(path.gender) !== 'diverse';
+  });
+
+  required(path.salutation, {
+    when: (ctx) => ctx.valueOf(path.gender) === 'diverse',
+    message: 'Please choose a salutation, when diverse gender selected.',
+  });
+  required(path.pronoun, {
+    when: (ctx) => ctx.valueOf(path.gender) === 'diverse',
+    message: 'Please choose a pronoun, when diverse gender selected.',
+  });
+});
+
+@Component({
+  selector: 'app-identity-form',
+  imports: [FormField, FormError],
+  templateUrl: './identity-form.html',
+  styleUrl: './identity-form.scss',
+})
+export class IdentityForm {
+  readonly identity = input.required<FieldTree<GenderIdentity>>();
+
+  protected updateSalutationAndPronoun() {
+    this.identity().salutation().value.set('');
+    this.identity().salutation().reset();
+    this.identity().pronoun().value.set('');
+    this.identity().pronoun().reset();
+  }
+}
diff --git a/tmp/version-2/multiselect.html b/tmp/version-3/multiselect.html
index e69de29..25af118 100644
--- a/tmp/version-2/multiselect.html
+++ b/tmp/version-3/multiselect.html
@@ -0,0 +1,22 @@
+<details class="dropdown" [aria-disabled]="disabled()" [aria-describedby]="ariaDescribedBy()">
+  <summary>
+    {{ label() }}
+  </summary>
+  @if (!disabled()) {
+    <ul>
+      @for (option of selectOptions(); track $index) {
+        <li>
+          <label>
+            <input
+              type="checkbox"
+              [name]="option"
+              [checked]="value().includes(option)"
+              (input)="changeInput(option, $event)"
+            />
+            {{ option }}
+          </label>
+        </li>
+      }
+    </ul>
+  }
+</details>
diff --git a/tmp/version-2/multiselect.ts b/tmp/version-3/multiselect.ts
index e69de29..42bc6e6 100644
--- a/tmp/version-2/multiselect.ts
+++ b/tmp/version-3/multiselect.ts
@@ -0,0 +1,37 @@
+import { Component, effect, input, model } from '@angular/core';
+import { FormValueControl, ValidationError } from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-multiselect',
+  imports: [],
+  templateUrl: './multiselect.html',
+  styleUrl: './multiselect.scss',
+})
+export class Multiselect implements FormValueControl<string[]> {
+  readonly value = model<string[]>([]);
+  readonly errors = input<readonly ValidationError[]>([]);
+  readonly disabled = input<boolean>(false);
+  readonly ariaDescribedBy = input<string>();
+
+  readonly label = input.required<string>();
+  readonly selectOptions = input.required<string[]>();
+
+  changeInput(option: string, e: Event) {
+    const checked = (e.target as HTMLInputElement).checked;
+    if (checked) {
+      // option checked, add to list
+      this.value.update((current) => [...current, option]);
+    } else {
+      // option unchecked, remove from list
+      this.value.update((current) => current.filter((o) => o !== option));
+    }
+  }
+
+  constructor() {
+    effect(() => {
+      if (this.disabled()) {
+        this.value.set([]);
+      }
+    });
+  }
+}
diff --git a/tmp/version-2/registration-form.html b/tmp/version-3/registration-form.html
index 85cc7c7..12b201d 100644
--- a/tmp/version-2/registration-form.html
+++ b/tmp/version-3/registration-form.html
@@ -12,6 +12,9 @@
     <app-form-error [fieldRef]="registrationForm.username" />
   </label>
 
+  <!-- A whole child form with own model -->
+  <app-identity-form [identity]="registrationForm.identity" />
+
   <!-- native HTML inputs bound with the [formField] directive -->
   <div>
     <label
@@ -75,18 +78,12 @@
     >Subscribe to Newsletter?
     <input type="checkbox" [formField]="registrationForm.newsletter" />
   </label>
-
-  <label>
-    Topics (multiple possible):
-    <select [formField]="registrationForm.newsletterTopics">
-      <option value=""></option>
-      <option value="Angular">Angular</option>
-      <option value="Vue">Vue</option>
-      <option value="React">React</option>
-    </select>
-    <app-form-error [fieldRef]="registrationForm.newsletterTopics" />
-  </label>
-
+  <app-multiselect
+    [formField]="registrationForm.newsletterTopics"
+    [selectOptions]="['Angular', 'React', 'Vue', 'Svelte']"
+    label="Topics (multiple possible):"
+  />
+  <app-form-error [fieldRef]="registrationForm.newsletterTopics" />
   <label
     >I agree to the terms and conditions
     <input
diff --git a/tmp/version-2/registration-form.ts b/tmp/version-3/registration-form.ts
index 09ec664..4e34e02 100644
--- a/tmp/version-2/registration-form.ts
+++ b/tmp/version-3/registration-form.ts
@@ -1,10 +1,12 @@
 import { Component, inject, resource, signal } from '@angular/core';
 import {
+  apply,
   applyEach,
   applyWhen,
-  FormField,
+  debounce,
   disabled,
   email,
+  FormField,
   FieldTree,
   form,
   maxLength,
@@ -23,25 +25,34 @@ import {
 
 import { DebugOutput } from '../debug-output/debug-output';
 import { FormError } from '../form-error/form-error';
+import {
+  GenderIdentity,
+  IdentityForm,
+  identitySchema,
+  initialGenderIdentityState,
+} from '../identity-form/identity-form';
+import { Multiselect } from '../multiselect/multiselect';
 import { RegistrationService } from '../registration-service';
 
 export interface RegisterFormData {
   username: string;
+  identity: GenderIdentity;
   age: number;
   password: { pw1: string; pw2: string };
   email: string[];
   newsletter: boolean;
-  newsletterTopics: string;
+  newsletterTopics: string[];
   agreeToTermsAndConditions: boolean;
 }
 
 const initialState: RegisterFormData = {
   username: '',
+  identity: initialGenderIdentityState,
   age: 18,
   password: { pw1: '', pw2: '' },
   email: [''],
-  newsletter: false,
-  newsletterTopics: '',
+  newsletter: true,
+  newsletterTopics: ['Angular'],
   agreeToTermsAndConditions: false,
 };
 
@@ -50,6 +61,7 @@ export const formSchema = schema<RegisterFormData>((path) => {
   required(path.username, { message: 'Username is required.' });
   minLength(path.username, 3, { message: 'A username must be at least 3 characters long.' });
   maxLength(path.username, 12, { message: 'A username can be max. 12 characters long.' });
+  debounce(path.username, 500);
   validateAsync(path.username, {
     // Reactive params
     params: (ctx) => ctx.value(),
@@ -137,13 +149,20 @@ export const formSchema = schema<RegisterFormData>((path) => {
 
   // Disable newsletter topics when newsletter is unchecked
   disabled(path.newsletterTopics, (ctx) => !ctx.valueOf(path.newsletter));
+
+  // apply child schema for identity checks
+  apply(path.identity, identitySchema);
 });
 
 @Component({
   selector: 'app-registration-form',
-  imports: [FormField, DebugOutput, FormError, FormRoot],
+  imports: [FormField, DebugOutput, FormError, FormRoot, IdentityForm, Multiselect],
   templateUrl: './registration-form.html',
   styleUrl: './registration-form.scss',
+  // Also possible: set SignalFormsConfig only for local component:
+  // providers: [
+  //   provideSignalFormsConfig(signalFormsConfig)
+  // ]
 })
 export class RegistrationForm {
   readonly #registrationService = inject(RegistrationService);
@@ -159,6 +178,7 @@ export class RegistrationForm {
 
           try {
             await this.#registrationService.registerUser(form().value);
+            setTimeout(() => this.resetForm(), 3000);
           } catch (e) {
             errors.push({
               fieldTree: form,
@@ -167,7 +187,6 @@ export class RegistrationForm {
             });
           }
 
-          setTimeout(() => this.resetForm(), 3000);
           return errors;
         },
       },
@@ -175,13 +194,6 @@ export class RegistrationForm {
   );
 
   protected ariaInvalidState(field: FieldTree<unknown>): boolean | undefined {
-    if (field().value() === 'validuser') {
-      console.log('###### FIELD:', {
-        touched: field().touched(),
-        pending: field().pending(),
-        errors: field().errors(),
-      });
-    }
     return field().touched() && !field().pending() ? field().errors().length > 0 : undefined;
   }