fad

bookie/src/app/regimes/regime-detail/regime-detail.component.html

@@ -3,7 +3,7 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Name</mat-label>
-      <input matInput #nameElement [formField]="form.name" (keyup.enter)="save()" />
+      <input matInput [formField]="form.name" (keyup.enter)="save()" />
     </mat-form-field>
   </div>
   <div class="row-container">

bookie/src/app/regimes/regime-detail/regime-detail.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, ViewChild, computed, inject, linkedSignal, input } from '@angular/core';
+import { Component, computed, inject, linkedSignal, input, afterNextRender } from '@angular/core';
 import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -23,8 +23,7 @@ export interface RegimeDetailFormData {
   styleUrls: ['./regime-detail.component.css'],
   imports: [MatButtonModule, MatFormFieldModule, MatInputModule, FormField],
 })
-export class RegimeDetailComponent implements AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
+export class RegimeDetailComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
@@ -48,12 +47,10 @@ export class RegimeDetailComponent implements AfterViewInit {
 
   form = form(this.formModel);
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      if (this.nameElement !== undefined) {
-        this.nameElement.nativeElement.focus();
-      }
-    }, 0);
+  constructor() {
+    afterNextRender(() => {
+      this.form().focusBoundControl();
+    });
   }
 
   save() {