Member 11072126 Ответов: 2

Focus() и nativeelement.focus() не работают в angular 10

Всем Привет,

Я пытаюсь реализовать focus() на элементах формы в Angular 10.

Я думал, что это очень просто. Я попробовал угловым способом, который использовал ElementRef, и даже попробовал с базовым кодом javascript - document.getElementById(..).

Но ничего не получилось удачно, и я действительно не могу понять причину.

Что я уже пробовал:

Я пробовал двумя способами:

1. Код Javascript в файле .ts (typescript) 
document.getElementById("inputSearch").focus();


2. Угловой путь

test.component.html
<form class="form-horizontal fonts" autocomplete="off" action="" ngSubmit)="onSubmit()">
<div class="form-group">
<label class="control-label" for="prmCorrSelect">Correlation</label>
<select id="prmCorrSelect" #drop class="form-control input-types fonts" name="prmCorrSelect">
   <option *ngFor="let data of correlationList" [value]="data.Id">{{data.Correlation}} 
   </option>
</select>


тест.компонент.ТС
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

export class export class TestComponent implements OnInit {

  @ViewChild("drop") nameField: ElementRef;

  ngOnInit(): void {
    this.nameField.nativeElement.focus();
  }
}


Я не знаю, почему ни один из них не работает на меня.

2 Ответов

Рейтинг:
2

Sandeep Mewara

Здесь код работает нормально: форма-фокус элемента угловой путь[^] 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  @ViewChild("name") nameField: ElementRef;
  editName() {
    this.nameField.nativeElement.focus();
  }
}
Проверять.

Member 11072126

Привет, спасибо за ответ.
Я обновил свой вопрос и опубликовал файл html и ts. Я пытаюсь сосредоточиться на выпадающем списке, на загрузке страницы. Я не уверен, но нужно ли мне добавлять какие-либо свойства pther для элемента формы, чтобы эта вещь сработала?
Или он работает только с атрибутами "mat-Input"?

Рейтинг:
2

Member 14995555

импорт { Component, OnInit, ElementRef, ViewChild } из '@angular/core';

экспорт TestComponent класс реализует функции OnInit {

@ViewChild("drop") nameField: ElementRef;

ngOnInit(): void {

setTimeout(()=>{
это.имя.nativeElement.фокус();
},100)

}
}