góc 2 ngăn nhập từ nộp trong mẫu theo định hướng hình thức

Question

tôi có các hình thức sử dụng các kế hoạch chi tiết mẫu theo định hướng, vì vậy một cái gì đó như thế này:

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)"> 
    <input #name="ngModel" [(ngModel)]="name"> 
    <button type="submit">Submit form</button> 
</form> 

Bây giờ, làm thế nào tôi có thể ngăn chặn ENTER từ nộp mẫu đơn? Nó can thiệp vào hành vi tùy chỉnh ENTER bên trong biểu mẫu và cũng có thể nếu bạn vô tình nhấn enter vào đầu vào, điều này không mong muốn.

Tôi đã xem xét và tìm thấy một số câu trả lời Angular 1 cũ và cũng có một số JavaScript chuẩn nhưng tôi cảm thấy rằng Angular 2 phải có thứ như thế này đã được tích hợp sẵn nhưng tôi không thể tìm thấy nó.

Nếu không, cách tốt nhất để đạt được điều này là gì?

Answer 1

Hóa ra rằng bạn có thể sử dụng một cái gì đó đơn giản như:

<form (keydown.enter)="$event.preventDefault()"></form> 

Để ngăn chặn các hình thức từ nộp trên ENTER.

Answer 2

Để cho phép nhập chìa khóa để làm việc trong textareas nhưng ngăn chặn từ gửi mẫu, bạn có thể sửa đổi như sau:

Trong HTML template:

<form (keydown.enter)="handleEnterKeyPress($event)">...</form> 

Trong lớp của thành phần trong .ts mã sau:

handleEnterKeyPress(event) { 
    const tagName = event.target.tagName.toLowerCase(); 
    if (tagName !== 'textarea') { 
     return false; 
    } 
    } 

Answer 3

tôi biết tôi là muộn, nhưng có thể tôi đã nhận giải pháp thích hợp cho việc này,

nếu bạn đang sử dụng sau đó chỉ cần xác định

<button type="button"> 

thay vì không xác định hay xác định nó như là type = "submit" bởi vì nếu bạn không định nghĩa nó, nó sẽ nộp mẫu của bạn.

Cùng nếu bạn đang sử dụng sau đó cũng xác định

<input type="button"> 

và điều này sẽ làm việc.