Form trong AngularJS | 26 bài hướng dẫn AngularJs miễn phí

http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Form AngularJS AngularJS bổ sung cho form tính filling validation Bạn dùng ng-click để xử lý AngularJS click nút sử dụng cờ hiệu $dirty $invalid để làm cho có hiệu lực Sử dụng novalidate với khai báo form để vơ hiệu hóa tính valicate form Phần điều khiển form sử dụng hiệu biến AngularJS Các biến AngularJS cung cấp nhiều biến liên kết với phần điều khiển form HTML Ví dụ ng-click thường gắn với nút (button) Dưới biến hỗ trợ AngularJS  ng-click  ng-dbl-click  ng-mousedown  ng-mouseup  ng-mouseenter  ng-mouseleave  ng-mousemove  ng-mouseover  ng-keydown  ng-keyup  ng-keypress  ng-change ng-click Reset liệu form sử dụng ng-click directive button http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Reset function studentController($scope) { $scope.reset = function(){ $scope.firstName = "Mahesh"; $scope.lastName = "Parashar"; $scope.email = "MaheshParashar@tutorialspoint.com"; } $scope.reset(); } Validate liệu Dưới biến dùng để theo dõi lỗi  $dirty - Thông báo liệu bị thay đổi  $invalid- Thông báo liệu nhập vào khơng hợp lệ  $error- Thơng báo xác lỗi Ví dụ Dưới ví dụ minh họa directive bên trên: testAngularJS.jsp Angular JS Forms table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } AngularJS Sample Application Enter first name: First Name is required. Enter last name: type="text" ng-model="lastName" Last Name is required. Email: Email is required. Invalid email address. http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com ResetSubmit var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.reset = function(){ $scope.firstName = "Mahesh"; $scope.lastName = "Parashar"; $scope.email = "MaheshParashar@tutorialspoint.com"; } $scope.reset(); }); Kết Mở trang textAngularJS.jsp trình duyệt xem kết http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp http://vietjack.com/ Trang chia sẻ học online miễn phí Copyright © vietjack.com Page ... ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid || studentForm.lastname.$dirty && studentForm.lastname.$invalid || studentForm.email.$dirty && studentForm.email.$invalid" ng-click="submit()">Submit... textAngularJS.jsp trình duyệt xem kết http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com /angularjs/ index.jsp http://vietjack.com/ Trang chia sẻ học online miễn phí. .. style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid"> Email is required. Invalid