Consolidated commit message to v22 signals

overlord/src/app/auth/login/login.component.html

@@ -1,16 +1,16 @@
 <h2>Login</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Username</mat-label>
-      <input matInput #nameElement formControlName="username" />
+      <input matInput [formField]="form.username" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Password</mat-label>
-      <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
+      <input matInput [formField]="form.password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
       <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
     </mat-form-field>
   </div>
@@ -20,7 +20,7 @@
     <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Otp</mat-label>
-        <input matInput formControlName="otp" />
+        <input matInput [formField]="form.otp" />
       </mat-form-field>
     </div>
   }

overlord/src/app/auth/login/login.component.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, afterNextRender, linkedSignal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -11,13 +11,19 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { CookieService } from '../../shared/cookie.service';
 import { AuthService } from '../auth.service';
 
+export interface LoginFormData {
+  username: string;
+  password: string;
+  otp: string;
+}
+
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatDividerModule, MatButtonModule],
+  imports: [FormField, FormRoot, MatFormFieldModule, MatInputModule, MatIconModule, MatDividerModule, MatButtonModule],
 })
-export class LoginComponent implements OnInit, AfterViewInit {
+export class LoginComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private auth = inject(AuthService);
   private router = inject(Router);
@@ -25,12 +31,16 @@ export class LoginComponent implements OnInit, AfterViewInit {
   private cs = inject(CookieService);
   private cd = inject(ChangeDetectorRef);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    username: FormControl<string>;
-    password: FormControl<string>;
-    otp: FormControl<number | null>;
-  }>;
+  model = linkedSignal({
+    source: () => null,
+    computation: (): LoginFormData => ({
+      username: '',
+      password: '',
+      otp: '',
+    }),
+  });
+
+  form = createForm(this.model);
 
   hide: boolean;
   showOtp: boolean;
@@ -40,10 +50,8 @@ export class LoginComponent implements OnInit, AfterViewInit {
   constructor() {
     this.hide = true;
     this.showOtp = false;
-    this.form = new FormGroup({
-      username: new FormControl('', { validators: Validators.required, nonNullable: true }),
-      password: new FormControl('', { validators: Validators.required, nonNullable: true }),
-      otp: new FormControl(0),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
@@ -51,17 +59,11 @@ export class LoginComponent implements OnInit, AfterViewInit {
     this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   login(): void {
-    const formModel = this.form.value;
+    const formModel = this.model();
     const username = formModel.username ?? '';
     const password = formModel.password ?? '';
-    const otp = formModel.otp ?? 0;
+    const otp = Number(formModel.otp) || 0;
     this.auth
       .login(username, password, otp)
       // .pipe(first())