diff --git a/apps/forms/63-custom-forms/src/app/address-form.component.ts b/apps/forms/63-custom-forms/src/app/address-form.component.ts
new file mode 100644
index 000000000..ab03ef871
--- /dev/null
+++ b/apps/forms/63-custom-forms/src/app/address-form.component.ts
@@ -0,0 +1,98 @@
+import { Component, input, model } from '@angular/core';
+import {
+  FieldState,
+  FieldTree,
+  FormValueControl,
+} from '@angular/forms/signals';
+
+interface AddressFieldGroup {
+  street: string;
+  zipcode: string;
+  city: string;
+}
+
+@Component({
+  selector: 'app-address-form',
+  template: `
+    <div class="grid gap-4 sm:grid-cols-2" data-testid="shipping-fields">
+      <label
+        class="flex flex-col gap-1 text-sm font-medium text-slate-700 sm:col-span-2">
+        Street
+        <input
+          class="input"
+          type="text"
+          [value]="value().street"
+          (input)="updateField('street', $event.target.value)"
+          required
+          aria-required="true" />
+        <span class="hint">
+          @if (showError(fieldTree().street())) {
+            This field is required
+          }
+        </span>
+      </label>
+      <label class="flex flex-col gap-1 text-sm font-medium text-slate-700">
+        ZIP code
+        <input
+          class="input"
+          type="text"
+          [value]="value().zipcode"
+          (input)="updateField('zipcode', $event.target.value)"
+          required
+          aria-required="true" />
+        <span class="hint">
+          @if (showError(fieldTree().zipcode())) {
+            This field is required
+          }
+        </span>
+      </label>
+      <label class="flex flex-col gap-1 text-sm font-medium text-slate-700">
+        City
+        <input
+          class="input"
+          type="text"
+          [value]="value().city"
+          (input)="updateField('city', $event.target.value)"
+          required
+          aria-required="true" />
+        <span class="hint">
+          @if (showError(fieldTree().city())) {
+            This field is required
+          }
+        </span>
+      </label>
+    </div>
+  `,
+  styles: [
+    `
+      .input {
+        @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm outline-none transition focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200;
+      }
+      .hint {
+        @apply text-xs text-rose-600;
+      }
+    `,
+  ],
+})
+export class AddressFormComponent
+  implements FormValueControl<AddressFieldGroup>
+{
+  value = model<AddressFieldGroup>({
+    street: '',
+    zipcode: '',
+    city: '',
+  });
+
+  fieldTree = input.required<FieldTree<AddressFieldGroup>>();
+
+  updateField(field: keyof AddressFieldGroup, value: string) {
+    this.value.update((state) => ({
+      ...state,
+      [field]: value,
+    }));
+  }
+
+  showError<T>(field: FieldState<T>): boolean {
+    return field.invalid() && (field.touched() || field.dirty());
+  }
+}
diff --git a/apps/forms/63-custom-forms/src/app/app.component.ts b/apps/forms/63-custom-forms/src/app/app.component.ts
index ff074abff..ff568f341 100644
--- a/apps/forms/63-custom-forms/src/app/app.component.ts
+++ b/apps/forms/63-custom-forms/src/app/app.component.ts
@@ -1,38 +1,49 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { JsonPipe } from '@angular/common';
 import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  signal,
+  untracked,
+} from '@angular/core';
+import {
+  apply,
+  disabled,
+  FieldState,
+  form,
+  FormField,
+  required,
+  SchemaPathTree,
+  submit,
+} from '@angular/forms/signals';
+import { AddressFormComponent } from './address-form.component';
 
-type AddressGroup = FormGroup<{
-  street: FormControl<string>;
-  zipcode: FormControl<string>;
-  city: FormControl<string>;
-}>;
+type AddressGroup = {
+  street: string;
+  zipcode: string;
+  city: string;
+};
 
 type CheckoutForm = {
-  firstName: FormControl<string>;
-  lastName: FormControl<string>;
+  firstName: string;
+  lastName: string;
   shipping: AddressGroup;
   billing: AddressGroup;
-  sameAsShipping: FormControl<boolean>;
+  sameAsShipping: boolean;
 };
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [FormField, AddressFormComponent, JsonPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <main class="min-h-screen bg-slate-50 text-slate-900">
       <div class="mx-auto max-w-4xl px-6 py-12">
         <h1 class="mb-6 text-3xl font-semibold">Order</h1>
         <form
-          [formGroup]="form"
-          (ngSubmit)="onSubmit()"
+          (submit)="onSubmit($event)"
+          novalidate
           class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
           <section class="space-y-4">
             <h2 class="text-xl font-semibold">Information</h2>
@@ -43,11 +54,10 @@ type CheckoutForm = {
                 <input
                   class="input"
                   type="text"
-                  formControlName="lastName"
-                  required
+                  [formField]="form.lastName"
                   aria-required="true" />
                 <span class="hint">
-                  @if (showError(form.controls.lastName)) {
+                  @if (showError(form.lastName())) {
                     This field is required
                   }
                 </span>
@@ -58,11 +68,10 @@ type CheckoutForm = {
                 <input
                   class="input"
                   type="text"
-                  formControlName="firstName"
-                  required
+                  [formField]="form.firstName"
                   aria-required="true" />
                 <span class="hint">
-                  @if (showError(form.controls.firstName)) {
+                  @if (showError(form.firstName())) {
                     This field is required
                   }
                 </span>
@@ -72,56 +81,9 @@ type CheckoutForm = {
 
           <section class="space-y-4">
             <h2 class="text-xl font-semibold">Shipping address</h2>
-            <div
-              formGroupName="shipping"
-              class="grid gap-4 sm:grid-cols-2"
-              data-testid="shipping-fields">
-              <label
-                class="flex flex-col gap-1 text-sm font-medium text-slate-700 sm:col-span-2">
-                Street
-                <input
-                  class="input"
-                  type="text"
-                  formControlName="street"
-                  required
-                  aria-required="true" />
-                <span class="hint">
-                  @if (showError(shipping.controls.street)) {
-                    This field is required
-                  }
-                </span>
-              </label>
-              <label
-                class="flex flex-col gap-1 text-sm font-medium text-slate-700">
-                ZIP code
-                <input
-                  class="input"
-                  type="text"
-                  formControlName="zipcode"
-                  required
-                  aria-required="true" />
-                <span class="hint">
-                  @if (showError(shipping.controls.zipcode)) {
-                    This field is required
-                  }
-                </span>
-              </label>
-              <label
-                class="flex flex-col gap-1 text-sm font-medium text-slate-700">
-                City
-                <input
-                  class="input"
-                  type="text"
-                  formControlName="city"
-                  required
-                  aria-required="true" />
-                <span class="hint">
-                  @if (showError(shipping.controls.city)) {
-                    This field is required
-                  }
-                </span>
-              </label>
-            </div>
+            <app-address-form
+              [formField]="form.shipping"
+              [fieldTree]="form.shipping" />
           </section>
 
           <section class="space-y-4">
@@ -132,71 +94,23 @@ type CheckoutForm = {
                 <input
                   type="checkbox"
                   class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
-                  [checked]="form.controls.sameAsShipping.value"
-                  (change)="toggleSameAsShipping()" />
+                  [formField]="form.sameAsShipping" />
                 Billing address same as shipping
               </label>
             </div>
 
-            @if (!form.controls.sameAsShipping.value) {
-              <div
-                formGroupName="billing"
-                class="grid gap-4 sm:grid-cols-2"
-                data-testid="billing-fields">
-                <label
-                  class="flex flex-col gap-1 text-sm font-medium text-slate-700 sm:col-span-2">
-                  Street
-                  <input
-                    class="input"
-                    type="text"
-                    formControlName="street"
-                    required
-                    aria-required="true" />
-                  <span class="hint">
-                    @if (showError(billing.controls.street)) {
-                      This field is required
-                    }
-                  </span>
-                </label>
-                <label
-                  class="flex flex-col gap-1 text-sm font-medium text-slate-700">
-                  ZIP code
-                  <input
-                    class="input"
-                    type="text"
-                    formControlName="zipcode"
-                    required
-                    aria-required="true" />
-                  <span class="hint">
-                    @if (showError(billing.controls.zipcode)) {
-                      This field is required
-                    }
-                  </span>
-                </label>
-                <label
-                  class="flex flex-col gap-1 text-sm font-medium text-slate-700">
-                  City
-                  <input
-                    class="input"
-                    type="text"
-                    formControlName="city"
-                    required
-                    aria-required="true" />
-                  <span class="hint">
-                    @if (showError(billing.controls.city)) {
-                      This field is required
-                    }
-                  </span>
-                </label>
-              </div>
+            @if (!form.sameAsShipping().value()) {
+              <app-address-form
+                [formField]="form.billing"
+                [fieldTree]="form.billing" />
             }
           </section>
 
           <div
             class="flex items-center justify-between border-t border-slate-200 pt-4">
             <div class="text-sm text-slate-600">
-              <span [class.text-rose-600]="form.invalid">
-                {{ form.invalid ? 'Form incomplete' : 'Ready to submit' }}
+              <span [class.text-rose-600]="form().invalid()">
+                {{ form().invalid() ? 'Form incomplete' : 'Ready to submit' }}
               </span>
             </div>
             <button
@@ -212,7 +126,7 @@ type CheckoutForm = {
           <h3 class="mb-2 text-lg font-semibold">Preview</h3>
           <pre
             class="overflow-x-auto rounded bg-slate-900 p-4 text-sm text-slate-100"
-            >{{ form.getRawValue() | json }}</pre
+            >{{ form().value() | json }}</pre
           >
         </section>
       </div>
@@ -230,59 +144,61 @@ type CheckoutForm = {
   ],
 })
 export class AppComponent {
-  readonly shipping: AddressGroup = this.createAddressGroup();
-  readonly billing: AddressGroup = this.createAddressGroup();
+  model = signal<CheckoutForm>({
+    firstName: '',
+    lastName: '',
+    shipping: {
+      street: '',
+      zipcode: '',
+      city: '',
+    },
+    billing: {
+      street: '',
+      zipcode: '',
+      city: '',
+    },
+    sameAsShipping: false,
+  });
 
-  readonly form = new FormGroup<CheckoutForm>({
-    firstName: new FormControl('', {
-      nonNullable: true,
-      validators: [Validators.required],
-    }),
-    lastName: new FormControl('', {
-      nonNullable: true,
-      validators: [Validators.required],
-    }),
-    shipping: this.shipping,
-    billing: this.billing,
-    sameAsShipping: new FormControl(false, { nonNullable: true }),
+  form = form(this.model, (schema) => {
+    required(schema.firstName);
+    required(schema.lastName);
+    required(schema.billing, {
+      when: ({ valueOf }) => valueOf(schema.sameAsShipping),
+    });
+    apply(schema.shipping, this.addressSchema);
+    apply(schema.billing, this.addressSchema);
+    disabled(schema.billing, ({ valueOf }) => valueOf(schema.sameAsShipping));
   });
 
-  toggleSameAsShipping(): void {
-    const checked = !this.form.controls.sameAsShipping.value;
-    this.form.controls.sameAsShipping.setValue(checked, { emitEvent: false });
-    if (checked) {
-      this.billing.setValue(this.shipping.getRawValue(), { emitEvent: false });
-      this.billing.disable({ emitEvent: false });
-    } else {
-      this.billing.enable({ emitEvent: false });
-    }
-  }
+  constructor() {
+    effect(() => {
+      const checked = this.form.sameAsShipping().value();
 
-  onSubmit(): void {
-    this.form.markAllAsTouched();
-    if (this.form.invalid) {
-      return;
-    }
+      if (checked) {
+        untracked(() => {
+          this.form.billing().value.set(this.form.shipping().value());
+        });
+      }
+    });
   }
 
-  showError(control: FormControl<string>): boolean {
-    return control.invalid && (control.touched || control.dirty);
+  addressSchema(item: SchemaPathTree<AddressGroup>) {
+    required(item.street);
+    required(item.zipcode);
+    required(item.city);
   }
 
-  private createAddressGroup(): AddressGroup {
-    return new FormGroup({
-      street: new FormControl('', {
-        nonNullable: true,
-        validators: [Validators.required],
-      }),
-      zipcode: new FormControl('', {
-        nonNullable: true,
-        validators: [Validators.required],
-      }),
-      city: new FormControl('', {
-        nonNullable: true,
-        validators: [Validators.required],
-      }),
+  async onSubmit($event: Event): Promise<void> {
+    // TODO: to be removed in 21.2 and replaced by formRoot directive
+    $event.preventDefault();
+
+    await submit(this.form, async () => {
+      // TODO: add submit logic
     });
   }
+
+  showError<T>(field: FieldState<T>): boolean {
+    return field.invalid() && (field.touched() || field.dirty());
+  }
 }