AngularJS Forms: Xử lý và xác thực dữ liệu

Forms trong AngularJS là một cách hiệu quả để thu thập và xử lý dữ liệu từ người dùng. AngularJS cung cấp các directive và service để giúp bạn tạo ra các form tương tác và dễ sử dụng.

Sử dụng ng-model để liên kết dữ liệu

Directive ng-model được sử dụng để liên kết một biến trong scope với một element HTML, tạo ra two-way data binding.

HTML

<input type="text" ng-model="username">

Sử dụng ng-submit để xử lý sự kiện submit

Directive ng-submit được sử dụng để xử lý sự kiện submit của một form.

HTML

<form ng-submit="submitForm()">
  <input type="text" ng-model="username">
  <button type="submit">Submit</button>
</form>

Sử dụng ng-disabled để vô hiệu hóa form

Directive ng-disabled được sử dụng để vô hiệu hóa một form hoặc một phần tử HTML.

HTML

<button type="submit" ng-disabled="form.$invalid">Submit</button>

Sử dụng ng-required để xác định trường bắt buộc

Directive ng-required được sử dụng để xác định một trường là bắt buộc.

HTML

<input type="text" ng-model="username" ng-required="true">

Sử dụng $dirty và $valid để kiểm tra trạng thái của form

Các thuộc tính $dirty và $valid của một form được sử dụng để kiểm tra xem form đã được thay đổi và có hợp lệ hay không.

HTML

<form name="myForm">
  <input type="text" ng-model="username" ng-required="true">
  <button type="submit" ng-disabled="myForm.$invalid || myForm.$dirty">Submit</button>
</form>

Sử dụng $error để kiểm tra lỗi xác thực

Thuộc tính $error của một element HTML được sử dụng để kiểm tra các lỗi xác thực của element đó.

HTML

<input type="email" ng-model="email" ng-required="true" name="email">
<p ng-show="myForm.email.$error.required">Email là bắt buộc</p>
<p ng-show="myForm.email.$error.email">Email không hợp lệ</p>

Các tính năng của Forms trong AngularJS

• Liên kết dữ liệu: Liên kết dữ liệu từ người dùng với các biến trong scope.
• Xử lý sự kiện submit: Xử lý sự kiện submit của một form.
• Xác thực dữ liệu: Xác định các trường bắt buộc và kiểm tra tính hợp lệ của dữ liệu.
• Vô hiệu hóa form: Vô hiệu hóa một form hoặc một phần tử HTML.
• Kiểm tra trạng thái của form: Kiểm tra xem form đã được thay đổi và có hợp lệ hay không.

Các ứng dụng của Forms trong AngularJS

• Thu thập dữ liệu từ người dùng.
• Xác thực dữ liệu trước khi gửi đến server.
• Tạo ra các form tương tác với người dùng.