Настройка фокуса на ввод на основе ссылки на шаблон

Question

У меня есть приложение Ionic 3 / angular 2, где у меня есть несколько кнопок на виде, которые отображают и скрывают поля небольших форм.

Моя цель - установить фокус на полях формы, когда я нажимаю соответствующую кнопку.

Я пытаюсь использовать переменные шаблона, чтобы сделать это, но это не работает.

Вот как выглядит поле ввода:

 <input type="text" [(ngModel)]="businessData.company" placeholder="Company" #jobInput>

И кнопка выглядит так:

    <button class="plus" ion-button clear icon-left (click)="showJob = !showJob; jobInput.focus()">
      <ion-icon name="md-add-circle"></ion-icon>
      add job
    </button>

Так как это не работает. Это явно неправильно.:-)

Любая помощь будет оценена.

Кстати, было бы неплохо, если бы кто-то также знал, как разместить поле в поле зрения, когда поля появляются. Некоторые из них появляются под клавиатурой.

Спасибо!!

Answer 1

Вам нужно использовать elementRef.focus ().

stackblitz: https://stackblitz.com/edit/angular-ztqjjv