282

इनपुट के फ़ोकस में परिवर्तन के बाद ही परिवर्तन की घटना को कहा जाता है। मैं इसे कैसे बना सकता हूं ताकि घटना हर कीपर पर आग लग जाए?

<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}

हर की-वर्ड btw पर दूसरा बाध्यकारी परिवर्तन।

angular

— डैनियल
स्रोत

472

मैंने सिर्फ इवेंट इनपुट का उपयोग किया है और यह निम्नानुसार काम करता है:

.html फ़ाइल:

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

.ts फ़ाइल:

onSearchChange(searchValue: string): void {  
  console.log(searchValue);
}

— रामी लिपटे
स्रोत

अच्छा था। मेरे लिये कार्य करता है।

— गोदकेरे

यह वही है जो मैं देख रहा था

— फ्रांसेस्को बोर्ज़ी

हम कुछ समय के लिए कैसे देरी करते हैं?

— महमूद हब्बौती

बहुत अच्छा काम करता है! धन्यवाद

— Vedha पेरी

शानदार काम करता है, बहुत बहुत धन्यवाद

— राहुल लाड

193

सिंटैक्स को इसके दो टुकड़ों में विभाजित ngModelChangeकरके उपयोग करें [(x)], अर्थात, संपत्ति डेटाबाइंडिंग और ईवेंट बाइंडिंग:

<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}

valuechange(newValue) {
  mymodel = newValue;
  console.log(newValue)
}

यह बैकस्पेस कुंजी के लिए भी काम करता है।

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

5

लेकिन जब एक बॉक्स सिंटैक्स में केले का उपयोग किया जाता है, तो यह केवल मॉडल को बदलता है, लेकिन आप परिवर्तन की घटना पर कुछ भी नहीं कर सकते।

— जियोरा गुत्सैट

4

यह सबसे अच्छा दो-तरफ़ा डेटा बाइंडिंग के लिए एक शानदार उत्तर है। स्वीकृत उत्तर होना चाहिए!

— Tk1993

4

बैकस्पेस कुंजी मॉडल को अपडेट नहीं कर रही है

— करण गर्ग

4

वह समाधान सही है। हालाँकि, ध्यान रखें कि ngModelChange को मान अद्यतन से पहले निकाल दिया जाता है। तो इस उदाहरण में 'newValue' में वह कुंजी है, जिसके बिना आपने जो कुंजी दबाया है, उसमें मॉडल है - इसलिए आपके पास वहां अपडेट किया गया मॉडल नहीं है। यदि आप सबसे हालिया मॉडल मान चाहते हैं, तो (की-अप) घटना का उपयोग करें।

— dave0688

1

@SateeshKumarAlli आपके पास कोणीय का कौन सा संस्करण है? मेरे लिए यह Angular 6.1.3

— Jette

96

(कीप) घटना आपका सबसे अच्छा दांव है।

आइए देखें क्यों:

(परिवर्तन) जैसा आपने उल्लेख किया है तभी इनपुट खोता है, इसलिए सीमित उपयोग का है।
(keypress) प्रमुख प्रेस पर ट्रिगर होता है, लेकिन बैकस्पेस की तरह कुछ कीस्ट्रोक्स पर ट्रिगर नहीं करता है।
(कीडाउन) हर बार एक कुंजी नीचे धकेल दिया जाता है। इसलिए हमेशा 1 वर्ण से पिछड़ जाता है; क्योंकि कीस्ट्रोकेक पंजीकृत होने से पहले यह तत्व स्थिति प्राप्त करता है।
(कीप) आपकी सबसे अच्छी शर्त है क्योंकि यह हर बार ट्रिगर होता है जब एक कुंजी धक्का घटना पूरी हो जाती है, इसलिए इसमें सबसे हाल का चरित्र भी शामिल है।

इसलिए (कीप) इसके साथ जाने के लिए सबसे सुरक्षित है ...

प्रत्येक कीस्ट्रोके पर एक घटना के विपरीत (परिवर्तन) घटना को पंजीकृत करता है
उन कुंजियों को शामिल करता है जिन्हें (कीपर) अनदेखा करता है
कोई (अंतराल) घटना के विपरीत नहीं है

— सागर
स्रोत

4

जैसा कि एक उत्तर में बताया गया है, इनपुट घटना वास्तव में अच्छी तरह से काम करती है। keyupहालांकि, सबसे सुरक्षित विकल्पों में inputसे एक है , घटना एक कदम आगे है keyup। keyupइसके विपरीत input, अगर कोई पाठ बॉक्स के मान को किसी अन्य तरीके से बदला जाता है जैसे कि बंधन।

— Planet_hunter

1

सागर, बहुत-बहुत धन्यवाद। यह स्वीकृत उत्तर होना चाहिए क्योंकि यह केवल (change)एक समाधान के साथ वास्तव में संबोधित करने के लिए एकमात्र है और फिर कुछ। स्वीकृत उत्तर पूरी तरह से बेकार है!

— कोड़ी

क्या कोई विशेष कारण है जो आप इस पर करना चाहेंगे (ngModelChange)?

— स्नेलिकोइल

1

यह स्वीकार किया जाना चाहिए और सबसे सुरक्षित उत्तर होना चाहिए क्योंकि यह मूल है और आपको पूर्ण नियंत्रण देता है और यह बहुत ही अभिव्यंजक है, क्योंकि हर कोई यह पढ़ता है कि जब घटना को निकाल दिया जाता है, तो यह वास्तव में जानता है।

— फ्लोरियन लेटेजब

1

@ThariqNugrohotomo नहीं, यह नहीं होगा। (इनपुट) का उपयोग करें यदि आप ऐसा कुछ देख रहे हैं।

— सागर

39

<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}

— गुंटर ज़ोचबॉयर
स्रोत

10

काम करता है, लेकिन अजीब तरह से बैकस्पेस कुंजी को एक कीपर के रूप में मान्यता नहीं दी जाती है?

— डेनियल

22

आप keydownया keyupइसके बजाय उपयोग करना चाह सकते हैं । कुछ कुंजियों में आग नहीं लगती है keypress। यह भी देखें stackoverflow.com/questions/4843472/…

— Günter Zöchbauer

मैंने कीडाउन, की-अप और इवेंट्स को बदलने की कोशिश की है लेकिन जब इनपुट w होता है तो हैंडलर मुझे खाली स्ट्रिंग रिपोर्ट करता है; जब इनपुट हम घटना हैंडलर है मुझे इनपुट के रूप में रिपोर्ट करता है। क्या आप बता सकते हैं कि यह व्यवहार क्यों?

— पूर्वविवेक

Keypress का उपयोग करें। इनपुट कीडाउन पर अभी तक नहीं बदला है।

— गुंटर जोचबॉयर

1

यह अजीब है, लेकिन मुझे इस पर एक इनपुट लैग मिल रहा है, जहां वैल्यू में अगले कीपर तक टाइप किया हुआ मूल्य नहीं है।

— मैट एलैंड

25

ऐसे मामलों को संभालने का एक अलग तरीका है फॉर्मकंट्रोल का इस्तेमाल करना और valueChangesजब आपका कंपोनेंट इनिशियलाइज़ हो जाए तो उसे सब्सक्राइब कर लें , जिससे आप http रिक्वेस्ट जैसे एडवांस रिक्वायरमेंट के लिए rxjs ऑपरेटर्स का इस्तेमाल कर सकेंगे , एक डिक्शनरी तब तक लागू करेंगे, जब तक यूजर एक वाक्य लिखकर खत्म न कर ले, उसकी वैल्यू ले लें। और पिछले छोड़ें, ...

import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'some-selector',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}

— सलेम ऑयरडानी
स्रोत

2

यह पूर्ण है। यह async http अनुरोधों के लिए उपयोग करते समय गपशप शोर को कम करता है। इसके अलावा पहले से ही परिवर्तन घटना श्रोताओं को सेट करता है। प्रतिभाशाली! धन्यवाद!

— हेवस्टोन

खुशी है कि यह मदद की। थैंक्स @ जीपस्टोन

— सलेम औएरदानी

1

एकाधिक नियंत्रण के मामले में, एक ही कोड के साथ आवेदन किया जा सकता हैFormGroup

— विकाश कुमार

20

कोणीय ngModel तुल्यकालिक रहता है कि गुप्त घटना घटना कॉल इनपुट है । इसलिए आपके प्रश्न का सबसे अच्छा उत्तर होना चाहिए:

<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}

— एमाका ओबियानोम
स्रोत

यह मेरे लिए @AndreiDiaconescu

— KhoPhi

एज (IE) ब्राउज़रों में (इनपुट) ईवेंट समर्थित नहीं है। एज ब्राउजर में इसके लिए क्या विकल्प है?

— सुधाकर

6

<input type="text" (keypress)="myMethod(myInput.value)" #myInput />

संग्रह

myMethod(value:string){
...
...
}

— उलरिक मेरगुइको
स्रोत

एसओ उलरिक में आपका स्वागत है, कृपया बताएं कि आपका कोड समस्या का समाधान कैसे करता है।

— CPHPython

4

आप जो खोज रहे हैं, वह है

<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}

फिर this.mymodelअपने .ts फ़ाइल में बाउंड एक्सेस करके डेटा के साथ जो चाहें करें।

— सनकते बर्डे
स्रोत

2

मेरे मामले में, समाधान है:

[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"

— hatem htira
स्रोत

1

रिएक्टिव फॉर्म्स के लिए, आप सभी फ़ील्ड्स या केवल किसी विशेष फ़ील्ड में किए गए परिवर्तनों की सदस्यता ले सकते हैं।

फ़ॉर्म समूह के सभी परिवर्तन प्राप्त करें:

this.orderForm.valueChanges.subscribe(value => {
    console.dir(value);
});

किसी विशिष्ट फ़ील्ड का परिवर्तन प्राप्त करें:

this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
    console.log(value);
  });

— stayingcool
स्रोत

0

मैं एक नंबर फ़ील्ड पर की-अप का उपयोग कर रहा हूं, लेकिन आज मैंने क्रोम में देखा कि इनपुट में ऊपर / नीचे बटन हैं, जो कि कीप द्वारा पहचाने नहीं गए मान को बढ़ाने / घटाने के लिए हैं।

मेरा समाधान एक साथ कीप और परिवर्तन का उपयोग करना है:

(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

प्रारंभिक परीक्षण यह इंगित करता है कि यह ठीक काम करता है, यदि आगे परीक्षण के बाद कोई बग पाया गया तो वापस पोस्ट किया जाएगा।

— user9273992
स्रोत

हर कीपर पर कोणीय 2 परिवर्तन घटना

(कीप) घटना आपका सबसे अच्छा दांव है।

इसलिए (कीप) इसके साथ जाने के लिए सबसे सुरक्षित है ...