时间戳

首页 > 解决方案 > 基于模板引用将焦点设置在输入上

angular - 基于模板引用将焦点设置在输入上

问题描述

我有一个 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>

因此，由于这不起作用。这显然是错误的。:-)

任何帮助，将不胜感激。

顺便说一句，如果有人也知道如何在字段出现时将字段置于视图中，那将是一个奖励。其中一些出现在键盘下方。

谢谢！！

标签： angularionic3

解决方案

您需要使用 elementRef.focus()。

堆栈闪电战： https ://stackblitz.com/edit/angular-ztqjjv

推荐阅读