Angular 2 NgFormのタッチイベントの観察方法は？

Question

NgFormのvalueChangesの観測可能なプロパティにコールバックをサブスクライブして、フォームのコントロールの値の変化に対応することができます。

同じように、ユーザの事態に対応するためには、のフォームコントロールの1つに触れる必要があります。

This classは、Observableを定義するように見え、は、ブール値として定義されます。

「コントロールタッチ」イベントに反応する方法はありますか？

Answer 1

ng2は、タッチイベントに反応する直接的な方法はありません。それは、AbstractControlの手つかず/触れプロパティを設定するvalueChangesイベントと（ぼかし）イベントを発生する（入力）イベントを使用しています。 テンプレート内の希望のイベントを手動で購読し、コンポーネントクラスで処理する必要があります。

Answer 2

デフォルトの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); 
    } 
}