Angular 2 焦点表单元素

Question

我创建了一个带有 angular 2 的表单，现在我想添加一些表单验证。验证工作正常，但现在我想专注于表单元素。这在 Angular 2 中是否可能？到目前为止我发现我可以使用 elementRef 和 Renderer 来聚焦元素，即

this.renderer.invokeElementMethod(this.el.nativeElement, 'focus');

但我不想通过 elementRef 访问元素，而是想将焦点设置到我的 FormGroup 对象中的 AbstractControl 之一。即

this.form.controls[ controlIndex ].focus

Angular 2 是否可行？如果不是，我如何将焦点设置到表单控件？

Answer 1

Angular 8 的现状

使用 ReactiveForm 仍然不可能做到这一点。为此，仍然有必要创建一个专用指令。

import { Directive, HostListener, ElementRef } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { FormGroup } from '@angular/forms';

@Directive({
  selector: '[focusInvalidInput]'
})
export class FormDirective {

  constructor(private el: ElementRef) { }

  @HostListener('submit')
  onFormSubmit() {
    const invalidControl = this.el.nativeElement.querySelector('.ng-invalid');

    if (invalidControl) {
      invalidControl.focus();  
    }
  }
}

这样使用:

<form focusInvalidInput [formGroup]="form" (ngSubmit)="submit()">
  <label for="first">First Name</label>
  <input formControlName="first" id="first" />

  <label for="last">Last Name</label>
  <input formControlName="last" id="last" />

  <br />
  <button>submit</button>
</form>

演示:https://stackblitz.com/edit/angular-fesawc