angular2 सबमिट बटन के बिना एंटर दबाकर फॉर्म सबमिट करें


100

क्या ऐसा फ़ॉर्म सबमिट करना संभव है जिसमें सबमिट बटन नहीं है (एंटर दबाकर) उदाहरण:

<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form

जवाबों:


77

हो सकता है कि आप इनपुट फ़ील्ड में जोड़ते हैं keypressया keydownफ़ंक्शन को उस फ़ंक्शन को असाइन करते हैं जो दर्ज करने पर सबमिट होता है

आपका टेम्प्लेट इस तरह दिखेगा

<form (keydown)="keyDownFunction($event)">
  <input type="text" />
</form

और आप अपनी कक्षा के अंदर कार्य करते हैं, ऐसा लगेगा

keyDownFunction(event) {
  if (event.keyCode === 13) {
    alert('you just pressed the enter key');
    // rest of your code
  }
}

206

आप भी जोड़ सकते हैं (keyup.enter)="xxxx()"


यह बहुत अच्छा काम करता है यदि आपके पास एक सादे पुराने कार्य हैं जो आप सबमिट हैंडलर के बजाय कॉल करना चाहेंगे
स्कॉट आर। फ्रॉस्ट

3
इस दृष्टिकोण का उल्लेख कोणीय डॉक्स पर किया गया था। angular.io/docs/ts/latest/guide/…
trungk18

यह मेरी स्थिति में काम करने का एकमात्र तरीका है, धन्यवाद!
स्विच87

5
यह स्वीकृत उत्तर होना चाहिए। केवल एंगुलर हासिल करने के तरीके में लालित्य। प्रतिभाशाली।
स्कॉट बायर्स

कोणीय दस्तावेज में नया उल्लेख: angular.io/guide/user-input#key-event-filtering-with-keyenter
Rafael Neto

84

संपादित करें:

  <form (submit)="submit()" >
    <input />
    <button type="submit" style="display:none">hidden submit</button>
  </form>

इस पद्धति का उपयोग करने के लिए, आपके पास सबमिट बटन होना चाहिए, भले ही वह प्रदर्शित न हो " टूलकिट के उत्तर के लिए धन्यवाद "

पुराना उत्तर:

हां, जैसा आपने लिखा है, इसके (submit)बजाय घटना का नाम इसके अलावा है (ngSubmit):

<form [ngFormModel]="xxx" (submit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form>


2
क्या आप कृपया एक प्लंकर प्रदान कर सकते हैं? क्योंकि यह काम नहीं करता है
टूलकिट

"दृश्यता: छिपी" का उपयोग करें बजाय। "प्रदर्शन: कोई नहीं!" क्रोम में काम किया, लेकिन सफारी में नहीं।
मोले जूल

इसका उपयोग किया जाना चाहिए, सिवाय इसके कि सबमिट-बटन को छिपाया नहीं जाना चाहिए, लेकिन दृश्यमान होना चाहिए क्योंकि कुछ लोग उस बटन को देखेंगे और दर्ज करने के लिए परेशान नहीं करेंगे।
फॉक्स

31

मैं पसंद करता हूं (keydown.enter)="mySubmit()"क्योंकि यदि कर्सर कहीं था, <textarea>लेकिन उसके अंत में नहीं तो एक लाइन ब्रेक नहीं जोड़ा जाएगा।


1
यह स्वीकृत समाधान होना चाहिए - बहुत क्लीनर
rhysclay

30

यह तरीका बहुत सरल है ...

<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">

</form>

2
धन्यवाद, यह आसान है जब मुझे उम्मीद थी। इस तरह हल किया गया: <इनपुट टाइप = "टेक्स्ट" क्लास = "फॉर्म-कंट्रोल" [(एनकोमॉडल)] = "ऑब्जेक्ट.लंगेजटेबलडेटा" (ब्लर) = "मायमेथोड ()" (कीप.इंटरनेट) = "मायमेथोड ()" / >
Loutocký

1
$ घटना के साथ एक समारोह भेजने के बजाय इस तरह से बहुत आसान है। धन्यवाद!
हेलेन

1
काफी बेहतर। कोई छिपा बटन या जेएस। शुद्ध कोणीय तरीका
RenanSS

इस तरह करना था: <form # f = "ngForm" (keyup.enter) = "appendSigBlock (f.value)"> कोणीय 9 का उपयोग करके, लेकिन महान काम करता है।
जॉर्डन

10

लैगिंग से बचने के लिए हमेशा कीपैड.इंटर के बजाय कीडाउन का उपयोग करें।

<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>

और Components.ts के अंदर कार्य करते हैं

 textValue : string = '';  
 sendMessage() {
    console.log(this.textValue);
    this.textValue = '';
  }


8
(keyup.enter)="methodname()"

यह काम करना चाहिए और पहले से ही कई उत्तरों में उल्लेख किया गया है, हालांकि फॉर्म टैग पर मौजूद होना चाहिए और बटन पर नहीं।


7

एक अदृश्य सबमिट बटन जोड़ने से चाल चल जाती है

<input type="submit" style="display: none;">


"दृश्यता: छिपी" का उपयोग करें बजाय। ऊपर क्रोम में काम किया, लेकिन सफारी में नहीं।
मोले जूल


4

उम्मीद है कि यह किसी की मदद कर सकता है: किसी कारण से मैं समय की कमी के कारण ट्रैक नहीं कर सका, अगर आपके पास एक फॉर्म है:

<form (ngSubmit)="doSubmit($event)">
  <button (click)="clearForm()">Clear</button>
  <button type="submit">Submit</button>
</form>

जब आप Enterबटन दबाते हैं, तो clearFormफ़ंक्शन को कॉल किया जाता है, भले ही अपेक्षित व्यवहार doSubmitफ़ंक्शन को कॉल करने के लिए था । Clearबटन को <a>टैग में बदलने से मेरे लिए समस्या हल हो गई। मैं अभी भी जानना चाहूंगा कि यह अपेक्षित है या नहीं। मुझे भ्रमित करने लगता है


8
इससे बचने के लिए, आपके पास स्पष्ट बटन के लिए टाइप = "बटन" है
रेडियो_हैड

3

यदि आप दोनों सरल को शामिल करना चाहते हैं जो मैंने यहां देखा था, तो आप इसे अपने बटन को फॉर्म के अंदर शामिल करके कर सकते हैं।

एक संदेश भेजने वाले फ़ंक्शन के साथ उदाहरण:

                <form>
                    <mat-form-field> <!-- In my case I'm using material design -->
                        <input matInput #message maxlength="256" placeholder="Message">
                    </mat-form-field>
                    <button (click)="addMessage(message.value)">Send message
                    </button>
                </form>

आप बटन पर क्लिक करने या एंटर की दबाने का विकल्प चुन सकते हैं।


कॉम्बो में @Clayton KN Passos जवाब के साथ इसका इस्तेमाल करना पड़ा और शानदार काम किया!
जॉर्डन

1

यदि आप दोनों को शामिल करना चाहते हैं - प्रवेश पर स्वीकार करें और क्लिक पर स्वीकार करें तो करें -

 <div class="form-group">
    <input class="form-control"   type="text" 
    name="search" placeholder="Enter Search Text"
              [(ngModel)]="filterdata"  
           (keyup.enter)="searchByText(filterdata)">
  <button type="submit"  
          (click)="searchByText(filterdata)" >

  </div>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.