angle2 gửi biểu mẫu bằng cách nhấn nút enter mà không gửi

Có thể gửi biểu mẫu không có nút gửi (bằng cách nhấn enter) không, ví dụ:

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

có thể bạn thêm keypresshoặc keydownvào các trường đầu vào và gán sự kiện vào chức năng sẽ thực hiện gửi khi nhấn enter

mẫu của bạn sẽ giống như thế này

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

Và bạn hoạt động bên trong lớp của bạn sẽ trông như thế này

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

Bạn cũng có thể thêm (keyup.enter)="xxxx()"

Biên tập:

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

Để sử dụng phương pháp này, bạn cần có nút gửi ngay cả khi nút đó không được hiển thị "Cảm ơn câu trả lời của Bộ công cụ "

Câu trả lời cũ:

Có, chính xác như bạn đã viết, ngoại trừ tên sự kiện (submit)thay vì (ngSubmit):

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

Tôi thích hơn (keydown.enter)="mySubmit()"vì sẽ không có thêm dấu ngắt dòng nếu con trỏ ở đâu đó trong <textarea>nhưng không phải ở cuối.

Cách này rất đơn giản ...

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

</form>

Luôn sử dụng keydown.enter thay vì keyup.enter để tránh bị lag.

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

và hoạt động bên trong component.ts

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

thêm cái này vào bên trong thẻ đầu vào của bạn

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

(keyup.enter)="methodname()"

điều này sẽ hoạt động và đã được đề cập trong nhiều câu trả lời, tuy nhiên điều đó sẽ xuất hiện trên thẻ biểu mẫu chứ không phải trên nút.

thêm một nút gửi ẩn không thực hiện được

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

Chỉ cần thêm (keyup.enter)="yourFunction()"

Hy vọng rằng điều này có thể giúp ích cho ai đó: vì lý do nào đó tôi không thể theo dõi vì thiếu thời gian, nếu bạn có biểu mẫu như:

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

khi bạn nhấn Enternút, clearFormhàm được gọi, mặc dù hành vi mong đợi là gọi doSubmithàm. Thay đổi Clearnút thành <a>thẻ đã giải quyết được vấn đề cho tôi. Tôi vẫn muốn biết nếu điều đó được mong đợi hay không. Có vẻ khó hiểu với tôi

Nếu bạn muốn bao gồm cả hai đơn giản hơn những gì tôi đã thấy ở đây, bạn có thể làm điều đó chỉ bằng cách đưa nút của bạn vào bên trong biểu mẫu.

Ví dụ với chức năng gửi tin nhắn:

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

Bạn có thể chọn giữa nhấp vào nút hoặc nhấn phím enter.

Nếu bạn muốn bao gồm cả hai - chấp nhận khi nhập và chấp nhận khi nhấp rồi thực hiện -

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