Как наблюдать затронутое событие на Angular 2 NgForm?

Можно подписаться на обратный вызов NgForm valueChanges, чтобы реагировать на изменения значений элементов управления формы.

Мне также нужно реагировать на случай, когда пользователь коснулся одного из элементов управления формой.

Этот класс, кажется, чтобы определить valueChanges Observable и touched свойство определяется как логическое значение.

Есть ли способ реагировать на событие, связанное с контролем?

Ответ 1

Прямой путь, предоставляемый ng2, не реагирует на затронутое событие. Он использует (входное) событие, чтобы запустить событие valueChanges и (размытие), чтобы установить косвенное /нетронутое свойство AbstractControl. Поэтому вам нужно вручную подписаться на нужное событие в шаблоне и обработать его в своем классе компонента.

Ответ 2

Вы можете расширить класс по умолчанию FormControl и добавить метод markAsTouched, который вызовет метод native, а также ваш побочный эффект.

import { Injectable } from '@angular/core';
import { FormControl, AsyncValidatorFn, ValidatorFn } from '@angular/forms';
import { Subscription, Subject, Observable } from 'rxjs';

export class ExtendedFormControl extends FormControl {
  statusChanges$: Subscription;
  touchedChanges: Subject<boolean> = new Subject<boolean>();

  constructor(
    formState: Object,
    validator: ValidatorFn | ValidatorFn[] = null,
    asyncValidator: AsyncValidatorFn | AsyncValidatorFn[] = null
  ) {
    super(formState, validator, asyncValidator);

    this.statusChanges$ = Observable.merge(
      this.valueChanges,
      this.touchedChanges.distinctUntilChanged()
    ).subscribe(() => {
      console.log('new value or field was touched');
    });
  }

  markAsTouched({ onlySelf }: { onlySelf?: boolean } = {}): void {
    super.markAsTouched({ onlySelf });

    this.touchedChanges.next(true);
  }
}