Angular2 पर onBlur इवेंट का उपयोग कैसे करें?

112

आप Angular2 में एक ऑनबुल घटना का कैसे पता लगा सकते हैं? मैं इसके साथ उपयोग करना चाहता हूं

<input type="text">

क्या कोई मुझे यह समझने में मदद कर सकता है कि इसका उपयोग कैसे किया जाए?

javascript angular onblur

— इग्नाट
स्रोत

211

का प्रयोग करें (eventName), जबकि डोम को घटना बाइंडिंग के लिए, मूल रूप से ()घटना बाइंडिंग के लिए प्रयोग किया जाता है। इसके अलावा चर के ngModelलिए दो तरह से बाध्यकारी पाने के लिए उपयोग करें myModel।

मार्कअप

<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">

कोड

export class AppComponent { 
  myModel: any;
  constructor(){
    this.myModel = '123';
  }
  onBlurMethod(){
   alert(this.myModel) 
  }
}

डेमो

वैकल्पिक (बेहतर नहीं)

<input type="text" #input (blur)="onBlurMethod($event.target.value)">

डेमो

आग पर सत्यापन के लिए मॉडल संचालित फॉर्म के लिए blur, आप updateOnपैरामीटर पारित कर सकते हैं ।

ctrl = new FormControl('', {
   updateOn: 'blur', //default will be change
   validators: [Validators.required]
});

डिजाइन डॉक्स

— पंकज पारकर
स्रोत

2

विकल्प बेहतर क्यों नहीं है?

— 22

जेएस को वापस भेजने के लिए कोणीय HTML के अंदर $ घटना का उपयोग नहीं करना चाहता है। सभी DOM ऑपरेशंस को बाइंडिंग, ngModel और whatnot जैसी चीजों के माध्यम से किया जाना चाहिए।

— बार्टन डर्बिन

14

तुम भी (ध्यान केंद्रित) घटना का उपयोग कर सकते हैं :

का प्रयोग करें (eventName), जबकि डोम को घटना बाइंडिंग के लिए, मूल रूप से ()घटना बाइंडिंग के लिए प्रयोग किया जाता है। इसके अलावा आप ngModelअपने लिए दो तरह से बाध्यकारी पाने के लिए उपयोग कर सकते हैं model। ngModelआप की मदद से modelअपने अंदर परिवर्तनशील मूल्य में हेरफेर कर सकते हैं component।

इसे HTML फ़ाइल में करें

<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">

और आपके (घटक) .ts फ़ाइल में

export class AppComponent { 
 model: any;
 constructor(){ }
 someMethodWithFocusOutEvent(){
   console.log('Your method called');
   // Do something here
 }
}

— अनिकेत काले
स्रोत

@Aniketkale यदि मैं आपकी विधि में एक चेतावनी देता हूं someMethodWithFocusOutEvent, तो कार्यक्रम लूप में प्रवेश कर जाता है क्योंकि चेतावनी क्षेत्र को अपना ध्यान खो देती है, क्या इसे ठीक करने का कोई तरीका है?

— ps0604

6

आप इनपुट टैग में सीधे (धब्बा) घटना का उपयोग कर सकते हैं ।

<div>
   <input [value] = "" (blur) = "result = $event.target.value" placeholder="Type Something">
   {{result}}
</div>

और आपको " परिणाम " में आउटपुट मिलेगा

— चौधरी
स्रोत

3

एचटीएमएल

<input name="email" placeholder="Email"  (blur)="$event.target.value=removeSpaces($event.target.value)" value="">

टीएस

removeSpaces(string) {
 let splitStr = string.split(' ').join('');
  return splitStr;
}

— सतीश विसार
स्रोत

1

/*for reich text editor */
  public options: Object = {
    charCounterCount: true,
    height: 300,
    inlineMode: false,
    toolbarFixed: false,
    fontFamilySelection: true,
    fontSizeSelection: true,
    paragraphFormatSelection: true,

    events: {
      'froalaEditor.blur': (e, editor) => { this.handleContentChange(editor.html.get()); }}

— एर मरियम अख्तर
स्रोत

1

यह गीथूब रेपो पर प्रस्तावित उत्तर है:

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

Github: करतब (प्रपत्र): FormControls में अपडेटऑन ब्लर विकल्प जोड़ें

0

(धब्बा) के बजाय (फ़ोकआउट) का उपयोग करने का प्रयास करें

— केविन ब्लैक
स्रोत