कोणीय 2 NgForm पर छुआ घटना का निरीक्षण कैसे करें?

Question

फॉर्म के नियंत्रणों के मानों में परिवर्तनों पर प्रतिक्रिया करने के लिए NgForm की valueChanges देखने योग्य संपत्ति पर कॉलबैक सदस्यता लेना संभव है।

मुझे उपयोगकर्ता की स्थिति की स्थिति पर प्रतिक्रिया करने के लिए, उसी संदर्भ में, को स्पर्श करने की आवश्यकता है।

This classvalueChanges परिभाषित करने के लिए प्रतीत होता है और touched संपत्ति को बूलियन के रूप में परिभाषित किया जाता है।

क्या "नियंत्रण छुआ" घटना पर प्रतिक्रिया करने का कोई तरीका है?

Answer 1

स्पर्श घटना पर प्रतिक्रिया करने के लिए ng2 द्वारा प्रदान किया गया कोई सीधा तरीका नहीं है। यह का उपयोग करता है (इनपुट) घटना valueChanges घटना और (कलंक) स्थापित करने के लिए घटना को छुआ/AbstractControl के अछूते संपत्ति आग की। तो आपको टेम्पलेट में वांछित ईवेंट पर मैन्युअल रूप से सब्सक्राइब करना होगा और इसे अपने घटक वर्ग में संभालना होगा।

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