Question

使用带有以下模式的angular2和angular2-material：

<form #userForm="ngForm" style="background-color: rgba(209,216,239,0.29)" layout-padding="20px">
        <div layout="row" layout-margin>
          <md-input-container flex>
            <input md-input
                   #eAccountName
                   #cAccountName="ngModel"
                   type="text"
                   placeholder="Account Name"
                   [(ngModel)]="accountName"
                   name="accountname"
                   maxlength="50"
                   [disabled]="!isEditable"
                   required>
          </md-input-container>
        </div>
</form>

如何以编程方式聚焦此（或任何其他）输入元素？如果可能的话，我还希望在重点关注后选择文本字段的内容。

感谢。

Answer 1

您可以使用md-input组件中的focus方法，如文档

中所示

https://material.angular.io/components/input/api

<span (click)="myinput.focus()">Focus it!</span>
<md-input-container class="example-full-width">
    <input mdInput #myinput>
</md-input-container>

从课堂内聚焦：

export class AppComponent {
    @ViewChild('myinput') articleInput;
    someMethod() {
        this.articleInput.nativeElement.focus();
    }
}

通过评论更新，感谢khoailang

您可以使用超时在短时间后设置焦点，以确保视图已初始化，并自动对焦所需的输入

export class MyDemoComponent implements AfterViewInit {
    interval: Subscription;
    @ViewChild('viewInputName') input;

    ngAfterViewInit() {
        this.interval = Observable.interval(750).subscribe(x => {
            this.input.nativeElement.focus();
            this.interval.unsubscribe();
        });
    }
}

始终记得取消订阅时间间隔。

以编程方式聚焦并选择angular2材料设计输入

1 个答案: