fad

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html

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

bookie/src/app/modifiers/modifier-detail/modifier-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, required } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -38,8 +38,7 @@ export interface ModifierDetailFormData {
     FormField,
   ],
 })
-export class ModifierDetailComponent implements AfterViewInit {
-  @ViewChild('name', { static: true }) nameElement?: ElementRef;
+export class ModifierDetailComponent {
   private modifierCategoryService = inject(ModifierCategoryService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
@@ -71,12 +70,10 @@ export class ModifierDetailComponent implements AfterViewInit {
     required(schema.modifierCategory, { message: 'Modifier Category is required' });
   });
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      if (this.nameElement !== undefined) {
-        this.nameElement.nativeElement.focus();
-      }
-    }, 0);
+  constructor() {
+    afterNextRender(() => {
+      this.form().focusBoundControl();
+    });
   }
 
   save() {