角2集集中在组件负载上的第一场字段上

问题描述 投票:0回答:6
在我的应用程序中,我想自动将重点放在组件负载上的第一个字段上。任何人都可以指导如何在我的应用程序中的每种形式(反应性表格)上进行任何重复的情况下实现这一目标。

angular angular2-template angular2-directives angular2-forms
6个回答
9
投票
<input class="form-control" [formControl]="name" autofocus>

您应该使用指令来实现此行为。
这将向您展示如何做到这一点:
Https://plnkr.co/edit/ttxcp7vclkltnb3xiaah?p = preview

5
投票

import {Component, NgModule, Directive, ElementRef, Renderer} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Directive({ selector: 'form[anyNameHere]' }) export class SelectFirstInputDirective { constructor(private _eRef: ElementRef, private _renderer : Renderer) { } private _getInputElement(nativeElement: any): any { if (!nativeElement || !nativeElement.children) return undefined; if (!nativeElement.children.length && nativeElement.localName === 'input' && !nativeElement.hidden) return nativeElement; let input; [].slice.call(nativeElement.children).every(c => { input = this._getInputElement(c); if (input) return false; // break return true; // continue! }); return input; } ngAfterViewInit() { let formChildren = [].slice.call(this._eRef.nativeElement.children); formChildren.every(child => { let input = this._getInputElement(child); if (input) { this._renderer.invokeElementMethod(input, 'focus', []); return false; // break! } return true; // continue! }); } } @Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <form anyNameHere> <div class="form-group"> <input hidden formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName"> <label class="col-sm-3 control-label" for="firstName">Name</label> <div class="col-sm-9 form-inline"> <div class="form-group"> <div class="col-sm-12"> <input formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input formcontrolname="lastName" type="text" class="form-control input-sm ng-untouched ng-pristine ng-valid" placeholder="Last Name" id="lastName"> </div> </div> </div> </div> </form> </div> `, }) export class App { constructor() { this.name = 'Angular2' } } @NgModule({ imports: [ BrowserModule ], declarations: [ App, SelectFirstInputDirective ], bootstrap: [ App ] }) export class AppModule {}

html

autofocus属性
完全做

2
投票
<input type="text" name="fname" autofocus>

import { AfterViewInit, Directive, ElementRef } from '@angular/core'; @Directive({ selector: 'form[appFocusFirstInput]' }) export class FocusFirstInputDirective implements AfterViewInit { constructor( private element: ElementRef ) { } ngAfterViewInit(): void { const input = this.element.nativeElement.querySelector('input'); if (input) { input.focus(); } } }

    


1
投票
<reference-name>.focus()



0
投票

tollowing方法您可以使用=>

您可以通过autofoucs指令OR
执行此操作。

0
投票
提供对您的控件的参考

  1. the在TS文件中像以下声明

    export class App implements OnInit{ @ViewChild('firstName') firstNameTextbox; constructor() { } ngOnInit() { this.firstNameTextbox.nativeElement.focus(); } }
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.