form-submit – 在提交和重置表单后将焦点设置在input元素中

概述我正在使用带有angular2的模板表单组件,我无法在提交表单后将焦点设置在我的firstName输入元素中.表单重新设置正常但无法设置焦点. 这是我的组件代码： export class TemplateFormComponent { @ViewChild('f') form: any; onSubmit() { if (this.form.valid) { co 我正在使用带有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 >  <label>First name</label>  <input type="text"                  name="firstname"         [(ngModel)]="model.firstname"         required         #firstname="ngModel"></div></form>

解决方法 在您的视图中,设置对要关注的输入字段的引用(您已经使用#firstname).

然后,在组件代码上,使用@VIEwChild创建对它的访问：

@VIEwChild(‘firstname’)firstnameRef：ElementRef;

最后,在重置表单后：

this.firstnameRef.nativeElement.focus()

ps.：我希望FormControl API公开一个焦点方法,但this issue on gitHub表明它可能永远不会发生.

总结

以上是内存溢出为你收集整理的form-submit – 在提交和重置表单后将焦点设置在input元素中全部内容，希望文章能够帮你解决form-submit – 在提交和重置表单后将焦点设置在input元素中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。