角度4设置焦点在模态的字段中

时间:2018-01-05 14:08:27

标签: angular

在我的角度4项目中,我需要将一些字段集中在bootstrap-modal

这是模式:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    <i class="material-icons">clear</i>
    </button>
    <h4 class="modal-title">{{'checkpoint.table.dialog.title' | translate }}</h4>
   </div>
   <form #modelForm="ngForm">
  <div class="modal-body">
    <div class="row">
        <div class="col-md-8">
            <div class="form-group label-floating">

                <label class="control-label">{{'checkpoint.table.dialog.labels.name' | translate }}
                <span class="star">*</span>
                </label>
                <input class="form-control" id="name" name="name" required [(ngModel)]="checkpoint.name" #focus />

            </div>
        </div>
    </div>

我用普通按钮打开对话框

<button type="button" class="btn btn-info btn-lg" 
data-toggle="modal" data-target="#myModal">Open Modal</button>

我尝试了一些解决方案,如:

@ViewChild('focus') inputElement: ElementRef;

并在我打开模态时按钮:

this.inputElement.nativeElement.focus();

或:

$('#myModal').on('shown.bs.modal', function () {
      $('#focus').focus();

但是在第一种情况下,inputElement是未定义的,在第二种情况下没有任何事情发生

2 个答案:

答案 0 :(得分:3)

我为此写了一条指令,当模式打开时,输入字段会自动聚焦。

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
    selector: '[focus]'
})
export class FocusDirective implements AfterViewInit {
    @Input() focus: boolean;

    constructor(private element: ElementRef) {}

    ngAfterViewInit() {
        if (this.focus) {
            this.element.nativeElement.focus();
        }
    }
}

在html中将其用于:

<input type="text"
       (keyup)="search($event)"
       focus="true"
>

答案 1 :(得分:2)

您需要使用setTimeOut进行锻炼..
虽然它不应该是未定义的,但是@ViewChild的代码(&#39;焦点&#39;)看起来还不错,但如果它不起作用,那么尝试将名称从焦点更改为其他东西......作为焦点也是关键词...

另外我建议不要混用Jquery和Angular ......不是很好的练习。

 setTimeout(() => {
        this.inputElement.nativeElement.focus();
 });