Focus

Component

@ViewChild('formTitle') formTitleInput: ElementRef;

onEdit(movie: IMovie): void {
  ...
  this.formTitleInput.nativeElement.focus();
}

Azt szeretnéd, hogy az “Edit” gombra kattintva a fókusz a formTitle mezőre kerüljön. Ezt megteheted az Angular @ViewChild dekorátorával, hogy hozzáférhess az adott DOM elemhez a komponensen belül.

Az alábbi lépéseket kell követned:

1. Használd a @ViewChild dekorátort az osztályban, hogy hivatkozz a formTitle mezőre.
2. Frissítsd az onEdit függvényt, hogy beállítsa a fókuszt a formTitle mezőre.

Így kellene kinéznie:

1. Hivatkozás a formTitle mezőre a komponensben:

import { ViewChild, ElementRef } from '@angular/core';

// ...

export class MoviesComponent {
  // ...

  @ViewChild('formTitle') formTitleInput: ElementRef;

  // ...
}

2. Az onEdit metódus frissítése a fókusz beállításához:

onEdit(movie: IMovie): void {
    this.form.setValue({
      formTitle: movie.title,
      formImdb: movie.imdb,
      formGenre: movie.genre,
      formYear: movie.year,
      formImage: movie.image,
    });

    if (movie.id) {
      this.movieId = movie.id;
      this.isEditing = true;
    } else {
      console.error('The movie ID is missing.');
    }

    // Fókusz a formTitle mezőre
    this.formTitleInput.nativeElement.focus();
}

3. Adja hozzá a #formTitle helyi változót az input mezőhöz a HTML-ben:

<input #formTitle type="text" class="form-control" formControlName="formTitle" id="formTitle" placeholder="" />

Ezekkel a változtatásokkal, amikor az “Edit” gombra kattintasz, a fókusz automatikusan a formTitle mezőre kerül.