我正在使用带有angular2的模板表单组件,提交表单后无法在firstName输入元素中设置焦点。窗体可以很好地重置,但是无法设置焦点。
这是我的组件代码:
export class TemplateFormComponent {
@ViewChild('f') form: any;
onSubmit() {
if (this.form.valid) {
console.log("Form Submitted!");
this.form.reset();
this.form.controls.firstName.focus();
}
}
}
和我的模板代码:
<form novalidate autocomplete="off" #f="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>First Name</label>
<input type="text"
class="form-control"
name="firstName"
[(ngModel)]="model.firstName"
required
#firstName="ngModel">
</div>
</form>
最佳答案
在您的 View 上,为要关注的输入字段设置引用(您已经使用#firstName
进行了引用)。
然后,在您的组件代码上,使用@ViewChild创建对其的访问:@ViewChild('firstName') firstNameRef: ElementRef;
最后,在重置表单之后:this.firstNameRef.nativeElement.focus()
ps .: 我希望FormControl api公开一个focus方法,但是this issue on gitHub建议它可能永远不会发生。