您应该使用指令来实现此行为。<input class="form-control" [formControl]="name" autofocus>
这将向您展示如何做到这一点:Https://plnkr.co/edit/ttxcp7vclkltnb3xiaah?p = preview
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 {}
完全做
<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();
}
}
}
<reference-name>.focus()
tollowing方法您可以使用=>您可以通过autofoucs指令OR
执行此操作。
the在TS文件中像以下声明
export class App implements OnInit{
@ViewChild('firstName') firstNameTextbox;
constructor() {
}
ngOnInit() {
this.firstNameTextbox.nativeElement.focus();
}
}