Как установить автофокус в угловых или угловых 2 не угловых

Question

Я вижу много сообщений о том, как установить автофокус на входе, поданном в angularjs, путем создания директивы или автофокуса в HTML. Существует ли быстрый и простой способ установить фокус в угловом режиме (угловой 2, угловой 4 и т. Д.)

Answer 1

В вашем HTML добавить #nameit чтобы получить его ссылку в коде компонента.

<input type="text" name="me" #nameit>

Затем примените авто фокуса в нем.

  @ViewChild('nameit') private elementRef: ElementRef;

  public ngAfterViewInit(): void {
    this.elementRef.nativeElement.focus();
  }

Answer 2

Ответ Анируддхи Даса хорошо работает в некоторых случаях. Однако, если это применяется к основанной на шаблоне форме с необходимой проверкой, вы можете получить следующую ошибку:

ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после> проверки. Предыдущее значение: "ложь". Текущее значение: "true".

Одним из решений этой проблемы является обертывание вызова focus() внутри ngInit() вместо ngAfterViewInit(). Итак, продолжая ответ Анидудхи:

В своем html добавьте #namedReference к компоненту:

<input type="text"
    placeholder="Your full name"
    name="name"
    ngModel
    #fullName="ngModel"
    required
    #nameit>

Затем используйте onNgInit(), чтобы применить к нему автофокус:

@ViewChild('nameit') private elementRef: ElementRef;

ngOnInit() {
    this.elementRef.nativeElement.focus();
}

Answer 3

<input id="name" type="text" #myInput />
{{ myInput.focus() }}

добавлять {{ myInput.focus() }} в ваш шаблон.

Answer 4

Вы можете использовать пример ответа с наибольшим количеством голосов, но иногда вам нужно поместить фокус в setTimeout для выполнения "асинхронного" вызова. В моем случае мне нужно поместить setTimeout в выбранный фильтр матового автозаполнения компонента углового материала.

мой код выглядит так

   setTimeout(() => this.qtdeRef.nativeElement.focus());

Answer 5

Этот сделал это за меня, так как мой элемент ввода мог отображаться или скрываться в зависимости от некоторого свойства.

Шаблон:

<input #captionElement matInput>

Код:

@ViewChild('captionElement') captionField: ElementRef;

Если элемент будет отображаться / скрываться (через *ngIf), например:

<ng-container *ngIf="editModeCaption; then editCaption else viewCaption" >
</ng-container>
<ng-template #editCaption>
  <mat-form-field>
   <mat-label>Image Caption</mat-label>
     <input  #captionElement matInput>
  </mat-form-field>
</ng-template>
<ng-template #viewCaption>
   ...
</ng-template>

Где editModeCaption - это свойство вашего контейнера (сообщает мне, нахожусь ли я в режиме редактирования или нет) компонента. НЕ ставьте его на ngAfterViewInit(), а на ngAfterViewChecked (интерфейс AfterViewChecked). как это:

ngAfterViewChecked(): void {
  if (this.editModeCaption) {
    this.captionField.nativeElement.focus();
  }
}

Answer 6

<input type="text" #textInput placeholder="something" (focus)="someFunction(textInput.value)"/>

или же

<input type="text" #textInput placeholder="something" (keyup.enter)="someMethod(textInput.value)"/>