javascript - Ngăn chặn gửi biểu mẫu khi nhấn phím Enter trong Angular

Có rất nhiều câu trả lời cho vấn đề này trên Stack Overflow. Nhưng tiếc là không câu nào trong số đó hoạt động với tôi. Tôi sẽ nói cho bạn biết những gì tôi đã thử từng cái một.

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

2. <button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>

   @Component(...) lớp MyComponent { skillsHandleEnter(sự kiện, skillString) { sự kiện.preventDefault(); /... logic của bạn } }

Nhưng không cách nào trong số các cách tiếp cận này hiệu quả. Tôi đang sử dụng ngx-tags-input cho phép tôi thêm một số thẻ và ngăn cách chúng bằng phím enter. Điều này gây ra vấn đề. Ngay khi tôi nhấn phím Enter, form của tôi bị gửi đi chỉ với một thẻ mà tôi đã nhập được. Hãy tin tôi, tôi đã thử gần như mọi cách để ngăn chặn điều này và tôi cũng không muốn làm mọi thứ quá phức tạp. Vui lòng bỏ qua các quy tắc đặt tên. Tôi sẽ chỉnh sửa sau.

Đây là blog.component.html của tôi trước khi triển khai bất kỳ giải pháp nào.

<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="exampleInputEmail1">
      <h3>Title</h3>
    </label>
    <input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
    <br>
    <label for="editor">
      <h3>Editor</h3>
    </label>
    <quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
  </div>
  <ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
  <button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>

Xin hãy sửa cho tôi.

Câu trả lời #1

Tôi đã làm theo hai bước đơn giản sau:

1) Tôi đã thêm một thuộc tính trong thẻ form của mình.

(keydown.enter)="$event.preventDefault()"

2) Thêm trình nghe (click) trên nút gửi

Vậy toàn bộ mã HTML trông như sau:

<div class="container">
  <div class="row pt-5">
    <div class="col-md-12 col-lg-12 col-sm-12 bg-light">
      <form [formGroup]="editorForm" (keydown.enter)="$event.preventDefault()">
        <div class="form-group">
                    ...
        </div>
        <button class="btn btn-primary (click)="onSubmit()">Submit</button>
      </form>
    </div>
  </div>
</div>

Vấn đề là tôi đã sử dụng trình nghe click với thẻ form cùng với keydown.enter.

Câu trả lời số 2

phần tử nút html có ba loại hợp lệ

1. submit : nút này gửi dữ liệu biểu mẫu lên máy chủ. Đây là mặc định 🔥🔥 nếu thuộc tính không được chỉ định, hoặc nếu thuộc tính được thay đổi động thành một giá trị rỗng hoặc không hợp lệ.
2. đặt lại: Nút bấm đặt lại tất cả các điều khiển về giá trị ban đầu của chúng, giống như . nút: Nút không có hành vi mặc định và không làm gì khi nhấn. Nó có thể có các kịch bản phía client liên kết với các sự kiện của phần tử, được kích hoạt khi các sự kiện xảy ra.
3. nút: nút không có hành vi mặc định và không làm gì khi nhấn. Nó có thể có các tập lệnh phía khách hàng liên kết với các sự kiện của phần tử, được kích hoạt khi các sự kiện xảy ra.

vì vậy để giải quyết vấn đề chỉ cần đặt loại nút thành button như thế này

<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>