form-submit - 提交并重置表单后，在输入元素中设置焦点

Question

我正在使用带有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>

Answer 1

在您的 View 上，为要关注的输入字段设置引用(您已经使用#firstName进行了引用)。

然后，在您的组件代码上，使用@ViewChild创建对其的访问:
@ViewChild('firstName') firstNameRef: ElementRef;
最后，在重置表单之后:
this.firstNameRef.nativeElement.focus()
ps .: 我希望FormControl api公开一个focus方法，但是this issue on gitHub建议它可能永远不会发生。