Jak zaobserwować dotknięte zdarzenie na Angular 2 NgForm?

Question

Możliwe jest zasubskrybowanie wywołania zwrotnego do obserwowalnej właściwości NgForm, w celu zareagowania na zmiany wartości formantów formularza.

Potrzebuję, w ten sam sposób, reagować na zdarzenie użytkownika dotykając jeden z form kontroli formularza.

This class zdaje się definiować obiekt obserwowalny o wartości valueChanges, a właściwość touched jest definiowana jako wartość logiczna.

Czy istnieje sposób, aby zareagować na zdarzenie "dotknięte kontrolą"?

Answer 1

Nie ma bezpośredniego sposobu, aby ng2 zareagował na dotknięte zdarzenie. Wykorzystuje (wejście) wydarzenie do pożaru valueChanges zdarzenie i (rozmycie) zdarzenie, aby ustawić dotknął/nietkniętą własność AbstractControl. Musisz więc ręcznie zasubskrybować żądane zdarzenie w szablonie i obsłużyć je w klasie komponentu.

Answer 2

Można rozszerzyć domyślną klasę FormControl i dodać metodę markAsTouched, która będzie wywoływać metodę natywną, oraz efekt dodatkowy.

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