Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Forms

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của các biểu mẫu trong AngularJS. Là một giáo viên khoa học máy tính gần gũi, tôi sẽ dẫn dắt các bạn qua hành trình này, từng bước một. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Hãy chuẩn bị một tách cà phê (hoặc thức uống yêu thích của bạn) và cùng bắt đầu nào!

AngularJS - Forms

Hiểu về các biểu mẫu trong AngularJS

Trước khi chúng ta đi vào chi tiết, hãy nói về tầm quan trọng của các biểu mẫu trong phát triển web. Hãy tưởng tượng bạn đang đặt pizza trực tuyến - bạn cần nhập tên, địa chỉ và sở thích pizza của mình, phải không? Đó chính là vai trò của các biểu mẫu! Chúng là cầu nối giữa người dùng và các ứng dụng web, cho phép nhập liệu và tương tác.

AngularJS, khung công tác siêu anh hùng của chúng ta, giúp xử lý các biểu mẫu một cách dễ dàng. Nó cung cấp các công cụ mạnh mẽ để tạo, quản lý và xác thực các biểu mẫu một cách dễ dàng. Hãy cùng khám phá các tính năng này một lần nữa.

Sự kiện trong các biểu mẫu AngularJS

Sự kiện giống như nhịp đập của ứng dụng web của bạn. Chúng là các hành động xảy ra khi người dùng tương tác với biểu mẫu của bạn - nhấp vào một nút, gõ vào một hộp văn bản hoặc chọn một tùy chọn từ một menu thả xuống.

Các sự kiện biểu mẫu phổ biến

Dưới đây là bảng các sự kiện biểu mẫu phổ biến trong AngularJS:

Sự kiện Mô tả
ng-submit Được kích hoạt khi biểu mẫu được gửi
ng-click Được kích hoạt khi một phần tử được nhấp
ng-change Được kích hoạt khi giá trị của một đầu vào thay đổi
ng-focus Được kích hoạt khi một phần tử nhận focus
ng-blur Được kích hoạt khi một phần tử mất focus

Hãy xem một ví dụ đơn giản về cách sử dụng sự kiện ng-submit:

<form ng-submit="submitForm()">
<input type="text" ng-model="user.name">
<button type="submit">Gửi</button>
</form>

Trong ví dụ này, khi biểu mẫu được gửi, nó sẽ gọi hàm submitForm() trong controller của AngularJS. Hàm này sau đó có thể xử lý dữ liệu biểu mẫu theo nhu cầu.

Sức mạnh của ng-click

Bây giờ, hãy zoom vào một trong những sự kiện được sử dụng phổ biến nhất: ng-click. Đ directive nhỏ bé này giống như một枝 c魔法, giúp các phần tử trở nên tương tác.

Dưới đây là một ví dụ đơn giản:

<button ng-click="sayHello()">Nói Hello</button>
$scope.sayHello = function() {
alert("Hello, AngularJS!");
};

Khi bạn nhấp vào nút này, nó sẽ gọi hàm sayHello(), hiển thị một thông báo với lời chào thân thiện. Đó là đơn giản như vậy!

Nhưng ng-click có thể làm nhiều hơn nữa. Hãy xem một ví dụ thực tế hơn:

<div ng-controller="CounterController">
<p>Đếm: {{count}}</p>
<button ng-click="increment()">+</button>
<button ng-click="decrement()">-</button>
</div>
app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});

Trong ví dụ này, chúng ta đã tạo một bộ đếm đơn giản. Mỗi lần bạn nhấp vào nút "+", nó sẽ tăng số đếm, và mỗi lần bạn nhấp vào nút "-", nó sẽ giảm số đếm. Điều này minh họa cách ng-click có thể được sử dụng để cập nhật dữ liệu theo từng phiên bản.

Xác thực dữ liệu: Giữ mọi thứ sạch sẽ và ngăn nắp

Bây giờ chúng ta đã biết cách xử lý sự kiện, hãy nói về xác thực dữ liệu. Điều này giống như việc có một bảo vệ tại câu lạc bộ - chúng ta muốn đảm bảo rằng chỉ có dữ liệu đúng mới được vào!

AngularJS cung cấp các tính năng xác thực biểu mẫu内置. Hãy xem một ví dụ:

<form name="myForm" ng-submit="submitForm()" novalidate>
<input type="text" name="userName" ng-model="user.name" required>
<span ng-show="myForm.userName.$touched && myForm.userName.$invalid">
Vui lòng nhập tên của bạn.
</span>

<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="myForm.userEmail.$touched && myForm.userEmail.$invalid">
Vui lòng nhập địa chỉ email hợp lệ.
</span>

<button type="submit" ng-disabled="myForm.$invalid">Gửi</button>
</form>

Trong ví dụ này, chúng ta đang sử dụng các chỉ thị xác thực内置 của AngularJS:

  • required: Làm cho trường bắt buộc
  • ng-show: Hiển thị thông báo lỗi khi điều kiện được满足
  • $touched: Kiểm tra xem trường đã được tương tác hay chưa
  • $invalid: Kiểm tra xem giá trị của trường có hợp lệ hay không
  • ng-disabled: Vô hiệu hóa nút gửi nếu biểu mẫu không hợp lệ

Bằng cách này, chúng ta đảm bảo rằng người dùng cung cấp dữ liệu hợp lệ trước khi gửi biểu mẫu. Đó là như có một trợ lý giúp kiểm tra mọi thứ!

Kết hợp tất cả lại: Một ví dụ đầy đủ

Bây giờ, hãy kết hợp tất cả những gì chúng ta đã học vào một ví dụ đầy đủ. Chúng ta sẽ tạo một biểu mẫu đăng ký đơn giản với xác thực và xử lý sự kiện.

<div ng-controller="RegistrationController">
<form name="registrationForm" ng-submit="submitForm()" novalidate>
<label>Tên:</label>
<input type="text" name="userName" ng-model="user.name" required>
<span ng-show="registrationForm.userName.$touched && registrationForm.userName.$invalid">
Vui lòng nhập tên của bạn.
</span>

<label>Email:</label>
<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="registrationForm.userEmail.$touched && registrationForm.userEmail.$invalid">
Vui lòng nhập địa chỉ email hợp lệ.
</span>

<label Tuổi:</label>
<input type="number" name="userAge" ng-model="user.age" min="18" required>
<span ng-show="registrationForm.userAge.$touched && registrationForm.userAge.$invalid">
Bạn phải ít nhất 18 tuổi.
</span>

<button type="submit" ng-disabled="registrationForm.$invalid">Đăng ký</button>
</form>

<div ng-show="formSubmitted">
<h2>Chào mừng, {{user.name}}!</h2>
<p>Email của bạn là: {{user.email}}</p>
<p>Tuổi của bạn là: {{user.age}}</p>
</div>
</div>
app.controller('RegistrationController', function($scope) {
$scope.user = {};
$scope.formSubmitted = false;

$scope.submitForm = function() {
if ($scope.registrationForm.$valid) {
$scope.formSubmitted = true;
console.log('Biểu mẫu gửi:', $scope.user);
} else {
alert('Vui lòng sửa lỗi trong biểu mẫu.');
}
};
});

Kết quả và những gì đang xảy ra sau hậu trường

Khi bạn chạy mã này, bạn sẽ thấy một biểu mẫu với ba trường: Tên, Email và Tuổi. Khi bạn tương tác với biểu mẫu, bạn sẽ nhận thấy:

  1. Thông báo lỗi xuất hiện khi bạn chạm vào một trường và để trống hoặc nhập dữ liệu không hợp lệ.
  2. Nút "Đăng ký" vẫn bị vô hiệu hóa cho đến khi tất cả các trường hợp hợp lệ.
  3. Khi bạn gửi biểu mẫu thành công, một thông báo chào mừng xuất hiện với thông tin bạn đã nhập.

Sau hậu trường, AngularJS đang thực hiện các phép thuật của mình:

  • Chỉ thị ng-model liên kết các trường đầu vào với các thuộc tính trên $scope.user.
  • Các chỉ thị xác thực (required, type="email", min="18") đảm bảo tính toàn vẹn của dữ liệu.
  • Chỉ thị ng-show hiển thị thông báo lỗi điều kiện.
  • Chỉ thị ng-disabled ngăn không cho gửi biểu mẫu nếu dữ liệu không hợp lệ.
  • Chỉ thị ng-submit xử lý gửi biểu mẫu, gọi hàm submitForm().

Và thế là bạn đã tạo một biểu mẫu hoàn chỉnh, có xác thực bằng AngularJS. Hãy nhớ, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các phần tử biểu mẫu và các quy tắc xác thực khác.

Hy vọng rằng sau bài học này, bạn sẽ cảm thấy tự tin hơn khi làm việc với các biểu mẫu trong AngularJS. Nhớ rằng, mỗi nhà phát triển giỏi đều bắt đầu từ con số 0, vì vậy hãy tiếp tục thực hành và khám phá. Trước khi bạn biết, bạn sẽ xây dựng các ứng dụng web phức tạp, tương tác một cách dễ dàng!

Chúc các bạn may mắn trong việc lập trình, các nhà khoa học máy tính tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Mô-đun
Hướng Dẫn Tiếp Theo:
AngularJS - Bao gồm