Phương thức
.
.
.
Submit
.
.
.
Submit
Nếu một điều khiển biểu mẫu [chẳng hạn như nút đặt lại] có tên hoặc id đặt lại, nó sẽ che dấu phương thức đặt lại của biểu mẫu. Nó không đặt lại các thuộc tính khác trong đầu vào, chẳng hạn như
.
.
.
Submit
Lưu ý rằng nếu
.
.
.
Submit
.
.
.
Submit
.
.
.
Submit
Video sau đây giải thích chi tiết từng đại diện và chức năng của
.
.
.
Submit
.
.
.
Submit
Nếu bạn thấy React Hook Form hữu ích trong dự án của mình, hãy cân nhắc gắn sao và ủng hộ nó
Gắn dấu sao cho chúng tôi trên GitHubTrong video này, tôi đang sử dụng trình chỉnh sửa trực tuyến có tên là Plunker để viết và chạy mã Angular. Sách và mã kể từ đó đã được cập nhật để sử dụng StackBlitz thay thế. Để hiểu thêm về lý do tại sao và sự khác biệt giữa đọc này
Xem mã
Mã vận hành
- Xác thực biểu mẫu dựa trên mô hình
- Mẫu phản ứng
- Mục tiêu học tập
- đệ trình
- đặt lại
- Bản tóm tắt
- niêm yết
Mục tiêu học tập
Cách gọi một hàm trên thành phần của chúng tôi khi người dùng nhấp vào gửi
Cách đặt lại biểu mẫu về trạng thái ban đầu
đệ trình
Để gửi biểu mẫu trong Angular, chúng tôi cần một nút có
.
.
.
Submit
.
.
.
Submit
.
.
.
Submit
.
.
.
Submit
Khi chúng tôi nhấn nút gửi này, thao tác này sẽ kích hoạt cơ chế gửi biểu mẫu HTML5 thông thường, do đó, cơ chế này sẽ cố gắng ĐĂNG biểu mẫu lên URL hiện tại
Tuy nhiên, thay vì phát hành một POST tiêu chuẩn, chúng tôi muốn gọi một hàm trên thành phần của chúng tôi, để làm điều đó, chúng tôi sử dụng lệnh
.
.
.
Submit
.
.
.
Submit
Điều này chiếm quyền điều khiển cơ chế gửi biểu mẫu thông thường và thay vào đó gọi hàm
.
.
.
Submit
.
.
.
Submit
Liệt kê 1. script. ts
onSubmit[] {
if [this.myform.valid] {
console.log["Form Submitted!"];
}
}Bây giờ, khi chúng tôi nhấn nút Gửi,
.
.
.
Submit
Mẹo
Chúng tôi có thể làm bất cứ điều gì chúng tôi muốn trong chức năng này
Để lấy giá trị hiện tại của mẫu biểu mẫu, chúng ta có thể gọi
.
.
.
Submit
Trong phần sau, chúng tôi sẽ đề cập đến cách tạo yêu cầu HTTP, sau khi biết rằng chúng tôi sẽ có thể tạo yêu cầu API chuyển các giá trị từ mô hình biểu mẫu của chúng tôi
đặt lại
Trong biểu mẫu hướng mô hình để đặt lại biểu mẫu, chúng ta chỉ cần gọi hàm
.
.
.
Submit
.
.
.
Submit
Đối với biểu mẫu mẫu của chúng ta, hãy đặt lại biểu mẫu trong hàm
.
.
.
Submit
Liệt kê 2. script. ts
.
.
.
Submit
Biểu mẫu hiện được đặt lại, tất cả các trường nhập trở lại trạng thái ban đầu và bất kỳ thuộc tính
.
.
.
Submit
.
.
.
Submit
.
.
.
Submit
Bản tóm tắt
Chúng tôi có thể liên kết với sự kiện đầu ra lệnh ngSubmit để gọi một hàm trên thành phần của chúng tôi khi người dùng gửi biểu mẫu
Việc gọi hàm
onSubmit[] {
if [this.myform.valid] {
console.log["Form Submitted!"];
}
}Chúng ta có thể gọi các hàm trên thành phần của mình để xử lý biểu mẫu. Tuy nhiên, Angular cung cấp cho chúng ta một cách khác để xử lý các giá trị biểu mẫu, bằng cách sử dụng lập trình phản ứng và RxJS, chúng ta sẽ đề cập đến điều đó trong bài giảng tiếp theo
niêm yết
Liệt kê 3. chính. ts
.
.
.
Submit
Bắt lỗi hay muốn đóng góp cho cuốn sách?
- Xác thực biểu mẫu dựa trên mô hình
- Mẫu phản ứng
JavaScript nâng cao
Khóa học độc đáo này dạy cho bạn kiến thức JavaScript nâng cao thông qua một loạt câu hỏi phỏng vấn. Đưa JavaScript của bạn đến năm 2021 ngay hôm nay
Nâng cấp JavaScript của bạn ngay bây giờ
.
.
.
Submit