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

Question

我正在使用 angular2 的模板表单组件，提交表单后无法在我的名字输入元素中设置焦点。表单重置正常，但无法设置焦点。

这是我的组件代码：

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

在您的视图中，设置对您想要关注的输入字段的引用（您已经使用

#firstName

获得了该引用）。

然后，在您的组件代码上，使用 @ViewChild 创建对它的访问：

@ViewChild('firstName') firstNameRef: ElementRef;

最后，重置表单后：

this.firstNameRef.nativeElement.focus()

ps.:我希望 FormControl api 能够公开焦点方法，但是 gitHub 上的这个问题表明它可能永远不会发生。

Answer 2

有关更通用的解决方案，请参阅

是否可以获取formControl的原生元素？ `

@Directive({
    selector: '[ngModel]',
})
export class NativeElementInjectorDirective {
    constructor(private el: ElementRef, private control : NgControl) {
        (<any>control.control).nativeElement = el.nativeElement;
    }
}

`

将指令添加到模块后，这会将 nativeElement 添加到每个表单控件。

更新：针对此用例的更简单的解决方案 要将焦点设置在表单上的第一个无效元素上，请创建如下指令：

import { Directive, HostListener, ElementRef} from '@angular/core';

@Directive({
  selector: '[focusFirstInvalidField]'
})
export class FocusFirstInvalidFieldDirective {

  constructor(private el: ElementRef) { }

  @HostListener('submit')
  onFormSubmit() {
    const invalidElements = this.el.nativeElement.querySelectorAll('.ng-invalid');
    if (invalidElements.length > 0) {
      invalidElements[0].focus();
    }
  }
}

然后只需将其添加到您的表单元素标签中

Answer 3

简单的解决方案：将“自动对焦”添加到输入元素属性中。

<input type="text" class="form-control" name="firstName" autofocus required>

Answer 4

也许不是那么 Angularish，但我可以工作（在各种 javascript 环境中）。

在 HTML 中：

<input id="inputFirstName" type="text" class="form-control" name="firstName">

在组件中：

  ngAfterViewChecked() {
    document.getElementById('inputFirstName')?.focus();
  }