angular2 submit form dengan menekan enter tanpa tombol submit

Apakah bisa mengirimkan formulir yang tidak memiliki tombol submit (dengan menekan enter) contoh:

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

mungkin Anda menambahkan keypressatau keydownke kolom input dan menetapkan acara ke fungsi yang akan melakukan submit ketika enter diklik

template Anda akan terlihat seperti ini

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

Dan Anda berfungsi di dalam kelas Anda akan terlihat seperti ini

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

Anda juga bisa menambahkan (keyup.enter)="xxxx()"

Edit:

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

Untuk menggunakan metode ini, Anda perlu memiliki tombol kirim meskipun tidak ditampilkan "Terima kasih atas jawaban Toolkit "

Jawaban Lama:

Ya, persis seperti yang Anda menulisnya, kecuali nama acara adalah (submit)bukan (ngSubmit):

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

Saya lebih suka (keydown.enter)="mySubmit()"karena tidak akan ditambahkan jeda baris jika kursor berada di suatu tempat <textarea>tetapi tidak di ujungnya.

Cara ini jauh lebih sederhana ...

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

</form>

Selalu gunakan keydown.enter sebagai ganti keyup.enter untuk menghindari keterlambatan.

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

dan berfungsi di dalam component.ts

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

tambahkan ini di dalam tag masukan Anda

<input type="text" (keyup.enter)="yourMethod()" />

(keyup.enter)="methodname()"

ini seharusnya berfungsi dan telah disebutkan dalam banyak jawaban, namun itu harus ada di tag formulir dan bukan di tombol.

menambahkan tombol kirim tak terlihat melakukan trik

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

Cukup tambahkan (keyup.enter)="yourFunction()"

Mudah-mudahan ini bisa membantu seseorang: entah kenapa saya tidak bisa lacak karena kekurangan waktu, jika Anda memiliki bentuk seperti:

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

ketika Anda menekan Entertombol, clearFormfungsi dipanggil, meskipun perilaku yang diharapkan adalah memanggil doSubmitfungsi. Mengubah Cleartombol menjadi <a>tag memecahkan masalah bagi saya. Saya masih ingin tahu apakah itu diharapkan atau tidak. Sepertinya membingungkan saya

Jika Anda ingin memasukkan keduanya lebih sederhana dari apa yang saya lihat di sini, Anda dapat melakukannya hanya dengan memasukkan tombol Anda di dalam formulir.

Contoh dengan fungsi mengirim pesan:

                <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>

Anda dapat memilih antara mengklik tombol atau menekan tombol enter.

Jika Anda ingin memasukkan keduanya - terima saat masuk dan terima saat klik lalu lakukan -

 <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>