version-1-version-2.diff

diff --git a/tmp/version-2/identity-form.html b/tmp/version-2/identity-form.html
new file mode 100644
index 0000000..e69de29
diff --git a/tmp/version-2/identity-form.ts b/tmp/version-2/identity-form.ts
new file mode 100644
index 0000000..e69de29
diff --git a/tmp/version-2/multiselect.html b/tmp/version-2/multiselect.html
new file mode 100644
index 0000000..e69de29
diff --git a/tmp/version-2/multiselect.ts b/tmp/version-2/multiselect.ts
new file mode 100644
index 0000000..e69de29
diff --git a/tmp/version-1/registration-form.html b/tmp/version-2/registration-form.html
index 47f7109..85cc7c7 100644
--- a/tmp/version-1/registration-form.html
+++ b/tmp/version-2/registration-form.html
@@ -6,6 +6,9 @@
       [formField]="registrationForm.username"
       [aria-invalid]="ariaInvalidState(registrationForm.username)"
     />
+    @if (registrationForm.username().pending()) {
+      <small>Checking availability ...</small>
+    }
     <app-form-error [fieldRef]="registrationForm.username" />
   </label>
 
@@ -21,6 +24,30 @@
       <app-form-error [fieldRef]="registrationForm.age" />
     </label>
   </div>
+
+  <div>
+    <label
+      >Password
+      <input
+        type="password"
+        autocomplete
+        [formField]="registrationForm.password.pw1"
+        [aria-invalid]="ariaInvalidState(registrationForm.password.pw1)"
+      />
+      <app-form-error [fieldRef]="registrationForm.password.pw1" />
+    </label>
+    <label
+      >Password Confirmation
+      <input
+        type="password"
+        autocomplete
+        [formField]="registrationForm.password.pw2"
+        [aria-invalid]="ariaInvalidState(registrationForm.password.pw2)"
+      />
+      <app-form-error [fieldRef]="registrationForm.password.pw2" />
+    </label>
+    <app-form-error [fieldRef]="registrationForm.password" />
+  </div>
   <fieldset>
     <legend>
       E-mail Addresses
@@ -48,6 +75,18 @@
     >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>
+
   <label
     >I agree to the terms and conditions
     <input
diff --git a/tmp/version-1/registration-form.ts b/tmp/version-2/registration-form.ts
index 125b378..09ec664 100644
--- a/tmp/version-1/registration-form.ts
+++ b/tmp/version-2/registration-form.ts
@@ -1,41 +1,79 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject, resource, signal } from '@angular/core';
 import {
+  applyEach,
+  applyWhen,
   FormField,
+  disabled,
+  email,
   FieldTree,
   form,
   maxLength,
   min,
   minLength,
+  pattern,
   required,
   schema,
   FormRoot,
+  validate,
+  validateAsync,
+  validateTree,
+  ValidationError,
+  WithFieldTree,
 } from '@angular/forms/signals';
 
+import { DebugOutput } from '../debug-output/debug-output';
 import { FormError } from '../form-error/form-error';
 import { RegistrationService } from '../registration-service';
-import { DebugOutput } from '../debug-output/debug-output';
 
-interface RegisterFormData {
+export interface RegisterFormData {
   username: string;
   age: number;
+  password: { pw1: string; pw2: string };
   email: string[];
   newsletter: boolean;
+  newsletterTopics: string;
   agreeToTermsAndConditions: boolean;
 }
 
 const initialState: RegisterFormData = {
   username: '',
   age: 18,
+  password: { pw1: '', pw2: '' },
   email: [''],
   newsletter: false,
+  newsletterTopics: '',
   agreeToTermsAndConditions: false,
 };
 
-const formSchema = schema<RegisterFormData>((path) => {
+export const formSchema = schema<RegisterFormData>((path) => {
   // Username validation
   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.' });
+  validateAsync(path.username, {
+    // Reactive params
+    params: (ctx) => ctx.value(),
+    // Factory creating a resource
+    factory: (params) => {
+      const registrationService = inject(RegistrationService);
+      return resource({
+        params,
+        loader: async ({ params }) => {
+          return await registrationService.checkUserExists(params);
+        },
+      });
+    },
+    // Maps resource to error
+    onSuccess: (result) => {
+      return result
+        ? {
+            kind: 'userExists',
+            message: 'The username you entered was already taken.',
+          }
+        : undefined;
+    },
+    onError: () => undefined,
+  });
 
   // Age validation
   min(path.age, 18, { message: 'You must be >=18 years old.' });
@@ -44,6 +82,61 @@ const formSchema = schema<RegisterFormData>((path) => {
   required(path.agreeToTermsAndConditions, {
     message: 'You must agree to the terms and conditions.',
   });
+
+  // E-mail validation
+  validate(path.email, (ctx) =>
+    !ctx.value().some((e) => e)
+      ? {
+          kind: 'atLeastOneEmail',
+          message: 'At least one E-mail address must be added.',
+        }
+      : undefined,
+  );
+  applyEach(path.email, (emailPath) => {
+    email(emailPath, { message: 'E-mail format is invalid.' });
+  });
+
+  // Password validation
+  required(path.password.pw1, { message: 'A password is required.' });
+  required(path.password.pw2, {
+    message: 'A password confirmation is required.',
+  });
+  minLength(path.password.pw1, 8, {
+    message: 'A password must be at least 8 characters long.',
+  });
+  pattern(
+    path.password.pw1,
+    new RegExp('^.*[!@#$%^&*(),.?":{}|<>\\[\\]\\\\/~`_+=;\'\\-].*$'),
+    { message: 'The password must contain at least one special character.' },
+  );
+  validateTree(path.password, (ctx) => {
+    return ctx.value().pw2 === ctx.value().pw1
+      ? undefined
+      : {
+          field: ctx.fieldTree.pw2, // assign the error to the second password field
+          kind: 'confirmationPassword',
+          message: 'The entered password must match with the one specified in "Password" field.',
+        };
+  });
+
+  // Newsletter validation
+  applyWhen(
+    path,
+    (ctx) => ctx.value().newsletter,
+    (pathWhenTrue) => {
+      validate(pathWhenTrue.newsletterTopics, (ctx) =>
+        !ctx.value().length
+          ? {
+              kind: 'noTopicSelected',
+              message: 'Select at least one newsletter topic.',
+            }
+          : undefined,
+      );
+    },
+  );
+
+  // Disable newsletter topics when newsletter is unchecked
+  disabled(path.newsletterTopics, (ctx) => !ctx.valueOf(path.newsletter));
 });
 
 @Component({
@@ -62,15 +155,33 @@ export class RegistrationForm {
     {
       submission: {
         action: async (form) => {
-          await this.#registrationService.registerUser(form().value);
-          console.log('Registration successful!');
-          this.resetForm();
+          const errors: WithFieldTree<ValidationError>[] = [];
+
+          try {
+            await this.#registrationService.registerUser(form().value);
+          } catch (e) {
+            errors.push({
+              fieldTree: form,
+              kind: 'serverError',
+              message: 'There was a server error, please try again (should work after 3rd try).',
+            });
+          }
+
+          setTimeout(() => this.resetForm(), 3000);
+          return errors;
         },
       },
     }
   );
 
   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;
   }
 
@@ -84,6 +195,7 @@ export class RegistrationForm {
       .value.update((items) => items.filter((_, index) => index !== removeIndex));
   }
 
+  // Reset form
   protected resetForm() {
     this.registrationModel.set(initialState);
     this.registrationForm().reset();