ng-submit trong AngularJS: Xử lý việc gửi biểu mẫu với ví dụ
James Hartman
⚡ Tóm tắt thông minh
Trong AngularJS, ng-submit liên kết một hàm của controller với sự kiện submit của trình duyệt khi nhập biểu mẫu, do đó các giá trị đã nhập được xử lý bên trong controller và trang sẽ không bao giờ tải lại thông qua phương thức POST mặc định.
Chỉ thị ng-submit của AngularJS
ng-gửi chỉ thị trong AngularJS được sử dụng để liên kết ứng dụng với sự kiện gửi của trình duyệt. Vì vậy trong trường hợp AngularJS trong sự kiện gửi, bạn có thể thực hiện một số xử lý trong chính bộ điều khiển và sau đó hiển thị thông tin đã xử lý cho người dùng.
Ghi chú phiên bản: AngularJS 1.x đã ngừng hỗ trợ dài hạn vào ngày 31 tháng 12 năm 2021, và nhóm phát triển framework xác nhận điều này. Việc hỗ trợ AngularJS đã chính thức kết thúc. Vào tháng 1 năm 2022, vì vậy sẽ không có bản phát hành hoặc bản vá bảo mật nào tiếp theo. Mọi bước và khối mã bên dưới đều được giữ nguyên chính xác như đã viết, như một tài liệu tham khảo lịch sử. Công việc mới thuộc về Angular hiện đại, thể hiện cùng một ý tưởng như vậy. (ngSubmit) được liên kết với FormGroup.
Cách gửi biểu mẫu trong AngularJS bằng ng-submit
Quá trình gửi thông tin trên một trang web thường được xử lý bởi sự kiện gửi trên trình duyệt web. Sự kiện này thường được sử dụng để gửi thông tin mà người dùng có thể đã nhập trên trang web tới máy chủ để xử lý thêm như thông tin xác thực đăng nhập, dữ liệu biểu mẫu, v.v. Việc gửi thông tin có thể được thực hiện thông qua yêu cầu GET hoặc POST.
Hãy lấy một ví dụ gửi biểu mẫu Angular để xem cách gửi biểu mẫu trong AngularJS.
Trong ví dụ về gửi biểu mẫu AngularJS của chúng tôi, chúng tôi sẽ trình bày một hộp văn bản cho người dùng để họ có thể nhập chủ đề mà họ muốn tìm hiểu. Sẽ có một nút gửi trên trang, khi nhấn vào sẽ thêm chủ đề vào danh sách không có thứ tự.
Hình minh họa bên dưới tracCác thao tác diễn ra từ chủ đề được nhập vào ô văn bản, qua nút Gửi, đến mục danh sách được thêm vào bên dưới.
Ví dụ gửi biểu mẫu AngularJS
Bây giờ, chúng ta sẽ xem một ví dụ về gửi biểu mẫu AngularJS từ Bộ điều khiển bằng cách sử dụng lệnh ng-submit:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Code Giải thích:
- Đầu tiên, chúng ta khai báo thẻ HTML của biểu mẫu, thẻ này sẽ chứa điều khiển "hộp văn bản" và "nút gửi" như trong ví dụ về sự kiện gửi biểu mẫu Angular. Sau đó, chúng ta sử dụng chỉ thị ng-submit của AngularJS để liên kết hàm "Display()" với biểu mẫu của mình. Hàm này sẽ được định nghĩa trong bộ điều khiển của chúng ta và sẽ được gọi khi biểu mẫu được gửi đi.
- Chúng tôi có một điều khiển văn bản trong đó người dùng sẽ nhập Chủ đề họ muốn tìm hiểu. Điều này sẽ được liên kết với một biến gọi là 'Chủ đề' sẽ được sử dụng trong bộ điều khiển của chúng tôi.
- Có nút gửi thông thường trong AngularJS mà người dùng sẽ nhấp vào khi họ nhập chủ đề họ muốn.
- Chúng tôi đã sử dụng ng-lặp lại chỉ thị hiển thị các mục danh sách của chủ đề mà người dùng nhập vào. Lệnh ng-repeat đi qua từng chủ đề trong mảng 'AllTopic' và hiển thị tên chủ đề tương ứng.
- Trong bộ điều khiển của chúng ta, chúng ta khai báo một biến mảng có tên là 'AllTopic'. Biến này sẽ được sử dụng để lưu trữ tất cả các chủ đề do người dùng nhập ở Bước 2.
- Chúng tôi đang xác định mã cho hàm Display() sẽ được gọi bất cứ khi nào người dùng nhấp vào nút Gửi. Ở đây, chúng tôi đang sử dụng hàm đẩy mảng để thêm Chủ đề được người dùng nhập thông qua biến 'Chủ đề' vào mảng 'AllTopic' của chúng tôi.
Nếu mã mẫu AngularJS được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Để xem mã hoạt động, trước tiên, hãy nhập Tên chủ đề như “Angular” như hiển thị ở trên vào hộp văn bản, sau đó nhấp vào nút Gửi.
- Sau khi nhấp vào nút gửi, bạn sẽ thấy mục được nhập vào hộp văn bản được thêm vào danh sách các mục.
- Điều này đạt được nhờ hàm Display(), hàm này được gọi khi nhấn nút gửi.
- Hàm Display() thêm văn bản vào biến mảng có tên là 'AllTopic.' Và lệnh ng-repeat của chúng tôi đi qua từng giá trị trong biến mảng 'AllTopic' và hiển thị chúng dưới dạng các mục danh sách tương ứng.
ng-submit vs ng-click: Nên sử dụng cái nào
Cả hai Các chỉ thị AngularJS Chúng có thể gọi cùng một hàm điều khiển, nhưng lại lắng nghe các sự kiện trình duyệt khác nhau. ng-submit ngồi trên <form> Thẻ này phản ứng với sự kiện gửi, vì vậy nó cũng được kích hoạt khi người dùng nhấn Enter bên trong một trường nhập liệu. ng-click Nó nằm trên một nút bấm và chỉ phản hồi khi có cú nhấp chuột hoặc thao tác kích hoạt tương đương.
| Yếu tố | ng-gửi | ng-click |
|---|---|---|
| Phần tử chủ | Thẻ biểu mẫu | Bất kỳ phần tử nào có thể nhấp chuột |
| Sự kiện đã được lắng nghe | gửi, bao gồm cả phím Enter. | chỉ nhấp chuột |
| Trình duyệt mặc định POST | Bị đàn áp bởi chỉ thị | Vẫn gửi dữ liệu từ nút gửi. |
| Truy cập vào trạng thái biểu mẫu | Đọc các giá trị `$valid` và `$invalid` trên bộ điều khiển biểu mẫu. | Không có ngữ cảnh hình thức riêng |
| Phù hợp tự nhiên | Chuyển dữ liệu biểu mẫu cho bộ điều khiển. | Các nút trên thanh công cụ, liên kết, trình kích hoạt cửa sổ bật lên |
Khả năng hỗ trợ bàn phím thường là yếu tố quyết định. Một hình thức được kết nối với ng-click Chức năng này tự động bỏ qua phím Enter, gây khó chịu cho người dùng khi điền thông tin đăng nhập. (Lưu ý: Phần cuối "Reserve" không cần dịch) ng-click Đối với các thao tác không phải là gửi biểu mẫu, chẳng hạn như xóa nội dung trong một trường hoặc mở hộp thoại.
Vì sao ng-submit ngăn chặn việc gửi dữ liệu mặc định của trình duyệt?
Một biểu mẫu HTML thông thường phản hồi sự kiện gửi bằng cách tuần tự hóa các trường của nó và yêu cầu trình duyệt tải một trang mới, điều này sẽ loại bỏ mọi giá trị được lưu trữ trong đó. $scope. Các ng-submit Chỉ thị này ngăn chặn điều đó xảy ra: nó kêu gọi preventDefault() Đối với bạn, biểu thức sẽ chạy và trang hiện tại vẫn giữ nguyên vị trí. Không $event Không cần đối số và không cần gọi thủ công.
Việc đàn áp này có một điều kiện được ghi nhận. Theo... tham chiếu ngSubmitHành động mặc định chỉ bị ngăn chặn khi biểu mẫu không chứa bất kỳ dữ liệu nào. action, data-action or x-action thuộc tính. Thêm bất kỳ thuộc tính nào trong số đó và trình duyệt sẽ điều hướng như bình thường sau khi trình xử lý hoàn tất, đây là hành vi chính xác đối với một biểu mẫu được hiển thị trên máy chủ được cải tiến dần dần và là điều bất ngờ ở mọi nơi khác.
Vì chỉ thị này nuốt chửng đối tượng sự kiện, hãy đọc các giá trị đã gửi từ các thuộc tính đó. mô hình ng ghi chúng vào phạm vi hoặc truyền chúng một cách rõ ràng, như trong ng-submit="Display(Topic)".
Cách xác thực biểu mẫu trước khi chạy ng-submit
Ví dụ trên chấp nhận một chủ đề trống, vì không có gì kiểm tra hộp văn bản trước. AngularJS xây dựng một bộ điều khiển biểu mẫu cho mỗi biểu mẫu được đặt tên, và bộ điều khiển đó hiển thị các cờ cần thiết để kiểm soát việc gửi biểu mẫu. Thêm novalidate Vì vậy, trình duyệt sẽ tắt các "bong bóng" HTML5 của riêng nó và AngularJS. xác nhận hình thức Chiếm giữ.
- Hãy đưa cho biểu mẫu a
nameAngularJS công bố một bộ điều khiển có tên đó trên môi trường xung quanh. điều khiển phạm vi. - Thêm
novalidatethêm thẻ form để việc xác thực trình duyệt gốc không gây cản trở. - Đánh dấu các ô, bằng cách sử dụng
required,ng-minlength,ng-maxlengthorng-pattern. - Bảo vệ người điều khiển bằng
$validvà truyền bộ điều khiển biểu mẫu vào để hàm có thể kiểm tra từng trường riêng lẻ. - Vô hiệu hóa nút bằng
ng-disabledchỉ vào$invalidĐiều này mang lại phản hồi trực quan ngay lập tức.
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate> <input type="text" name="Topic" ng-model="Topic" required> <input type="submit" value="Submit" ng-disabled="topicForm.$invalid"> </form>
Hai lỗi chính là nguyên nhân gây ra hầu hết các vấn đề được báo cáo liên quan đến mẫu này:
- Double nộp hồ sơ. Binding
ng-clicktrên nút gửi trong khing-submitHàm này chạy trình xử lý hai lần, mỗi lần một sự kiện. Tài liệu tham khảo chính thức cảnh báo không nên kết hợp hai trình xử lý, vì vậy hãy chọn một. - Bài nộp bất ngờ. Bất kỳ nút nào bên trong biểu mẫu mà không
type="button"Kích hoạt sự kiện gửi. Đánh dấu rõ ràng các nút hủy và đặt lại, nếu không chúng cũng sẽ kích hoạt trình xử lý.
Đang canh gác $valid Đây chỉ là một tiện ích, không phải là biện pháp kiểm soát an ninh. Các giá trị vẫn cần được xác thực lại trên máy chủ trước khi được lưu trữ.
