angular - 如何在 Angular 2 NgForm 上观察触摸事件？

Question

可以订阅 NgForm 的 valueChanges 可观察属性的回调，以便对表单控件值的变化使用react。

我需要以同样的方式对用户触摸其中一个表单控件的事件使用react。

This class似乎定义了 valueChanges Observable 并且 touched 属性被定义为 bool 值。

有没有办法对“控制触摸”事件使用react？

Answer 1

您可以扩展默认的 FormControl 类，并添加将调用本地方法的 markAsTouched 方法，以及您的副作用。

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);
  }
}