Блог

Я создал форму с помощью angular 2, и теперь я хочу добавить некоторую проверку формы. Проверка работает, но теперь я хочу сосредоточиться на элементах формы. Возможно ли это в angular 2. Что я нашел до сих пор, так это то, что я могу сфокусировать элемент с помощью ElementRef и средства визуализации, то есть

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

Но я не хочу получать доступ к элементу через ElementRef вместо этого я хочу установить фокус на один из моих AbstractControl в моем объекте FormGroup. т.е

 this.form.controls[ controlIndex ].focus
  

возможно ли это с angular 2? Если нет, то как я могу установить фокус на элемент управления формой?

Текущее состояние в 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

Одним из подходов было бы создание директивы и передача this.form.controls[ controlIndex ].hasError ей в качестве параметра:

 @Directive({
    selector: '[focus-on-error]'
})
export class FocusOnErrorDirective implements AfterViewInit {
    constructor(public element: ElementRef) {}
    @Input('focusOnError') focusOnError;

    ngAfterViewInit() {
        // put all your focusing logic here
        // watches are also available here
        element.focus()
    }
}
  

Затем вы можете использовать его в своих элементах формы:

 <input type="text" focus-on-error="form.controls[ controlIndex ].hasError">